Design/net.ikea.skapa.ui.components/Slider

Slider

@Composable
fun Slider(value: Float, valueLabel: String, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, label: String? = null, helperTextParams: HelperTextParams? = null, enabled: Boolean = true, onValueChangeFinished: () -> Unit? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, @IntRange(from = 0) steps: Int = 0, valueRange: ClosedFloatingPointRange<Float> = 0f..1f)

Slider component that allows users to make a single selection from a range of values.

Parameters

value

The current value of the slider.

valueLabel

A string label representing the current value of the slider.

onValueChange

A callback invoked when the slider's value changes.

modifier

The modifier to be applied to the slider.

label

An optional label displayed above the slider.

helperTextParams

Optional helper text parameters displayed below the label.

enabled

A boolean indicating whether the slider is enabled or disabled.

onValueChangeFinished

A callback invoked when the value change is finished.

interactionSource

The interaction source for the slider, used to observe interaction events.

steps

The number of discrete steps the slider can take between the minimum and maximum values.

valueRange

The range of values the slider can represent.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.HelperTextParams
import net.ikea.skapa.ui.components.HelperTextState
import net.ikea.skapa.ui.components.Slider

fun main() { 
   //sampleStart 
   SkapaTheme2(isSystemInDarkTheme()) {
    Column(verticalArrangement = Arrangement.spacedBy(20.dp)) {
        var sliderPosition by remember { mutableFloatStateOf(0f) }
        Slider(
            value = sliderPosition,
            label = "Skapa Slider",
            // The tooltip label for the current value of the slider. Reformat the initial float
            // value to your desired type and append your prefix or suffix to it
            valueLabel = "${sliderPosition.toInt()} cm",
            helperTextParams = HelperTextParams(label = "This is a helper text", state = HelperTextState.Regular),
            onValueChange = { sliderPosition = it }, // The callback to update the slider value
            valueRange = 0f..100f // The range of values the slider can take
        )

        var stepSliderPosition by remember { mutableFloatStateOf(0f) }
        Slider(
            value = stepSliderPosition,
            label = "Skapa Slider with steps",
            // The tooltip label for the current value of the slider. Reformat the initial float
            // value to your desired type and append your prefix or suffix to it
            valueLabel = "${stepSliderPosition.toInt()} cm",
            helperTextParams = HelperTextParams(label = "This is a helper text", state = HelperTextState.Regular),
            onValueChange = { stepSliderPosition = it }, // The callback to update the slider value
            steps = 5, // The number of discrete steps the slider can take
            valueRange = 0f..30f // The range of values the slider can take
        )
    }
} 
   //sampleEnd
}
@Composable
fun Slider(value: ClosedFloatingPointRange<Float>, valueLabel: String, onValueChange: (ClosedFloatingPointRange<Float>) -> Unit, modifier: Modifier = Modifier, label: String? = null, helperTextParams: HelperTextParams? = null, enabled: Boolean = true, onValueChangeFinished: () -> Unit? = null, startInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, endInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, @IntRange(from = 0) steps: Int = 0, valueRange: ClosedFloatingPointRange<Float> = 0f..1f)

Slider component that allows users to make a range selection from a range of values. This implies 2 selection points between the allowed range.

Parameters

value

The current value of the slider represented as a closed floating-point range.

valueLabel

A string label representing the current value of the slider.

onValueChange

A callback invoked when the slider's value changes.

modifier

The modifier to be applied to the slider.

label

An optional label displayed above the slider.

helperTextParams

Optional helper text parameters displayed below the label.

enabled

A boolean indicating whether the slider is enabled or disabled.

onValueChangeFinished

A callback invoked when the value change is finished.

startInteractionSource

The interaction source for the start thumb of the slider, used to observe interaction events.

endInteractionSource

The interaction source for the end thumb of the slider, used to observe interaction events.

steps

The number of discrete steps the slider can take between the minimum and maximum values.

valueRange

The range of values the slider can represent.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.HelperTextParams
import net.ikea.skapa.ui.components.HelperTextState
import net.ikea.skapa.ui.components.Slider

fun main() { 
   //sampleStart 
   SkapaTheme2(isSystemInDarkTheme()) {
    Column(verticalArrangement = Arrangement.spacedBy(20.dp)) {
        // This is a range slider which requires a start and end value. CloseFloatingPointRange<Float>.
        var rangeSliderPosition by remember { mutableStateOf(0f..5f) }
        Slider(
            value = rangeSliderPosition,
            label = "Skapa Range Slider",
            // The tooltip label for the current value of the slider. Reformat the initial float
            // value to your desired type and append your prefix or suffix to it
            valueLabel = "${rangeSliderPosition.start.toInt()} cm - ${rangeSliderPosition.endInclusive.toInt()} cm",
            helperTextParams = HelperTextParams(label = "This is a helper text", state = HelperTextState.Regular),
            onValueChange = { rangeSliderPosition = it }, // The callback to update the slider value
            valueRange = 0f..10f // The range of values the slider can take
        )

        // This is a range slider which requires a start and end value. CloseFloatingPointRange<Float>.
        var stepRangeSliderPosition by remember { mutableStateOf(0f..5f) }
        Slider(
            value = stepRangeSliderPosition,
            label = "Skapa Range Slider with steps",
            // The tooltip label for the current value of the slider. Reformat the initial float
            // value to your desired type and append your prefix or suffix to it
            valueLabel = "${stepRangeSliderPosition.start.toInt()} cm - ${stepRangeSliderPosition.endInclusive.toInt()} cm",
            helperTextParams = HelperTextParams(label = "This is a helper text", state = HelperTextState.Regular),
            steps = 9, // The number of discrete steps the slider can take
            onValueChange = { stepRangeSliderPosition = it }, // The callback to update the slider value
            valueRange = 0f..10f // The range of values the slider can take
        )
    }
} 
   //sampleEnd
}