Slider

Picks a value or a range along a track. Continuous or in steps.

Category: Selection and input
API status: Stable
Compose APIs: Slider, RangeSlider, VerticalSlider, SliderDefaults
Interactive page: https://m3e.ljzapps.app/#components/slider

When to use

Use a slider for values where the exact number matters less than the direction, such as volume or brightness. Add steps for discrete values and a RangeSlider to choose a minimum and maximum.

Show the current value as text next to the slider when precision matters.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Continuous

var value by rememberSaveable { mutableFloatStateOf(0.3f) }

Column(Modifier.widthIn(max = 360.dp).fillMaxWidth()) {
    Slider(value = value, onValueChange = { value = it })
    Text("Volume ${(value * 100).toInt()}")
}

Range

var range by remember { mutableStateOf(20f..70f) }

Column(Modifier.widthIn(max = 360.dp).fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(8.dp)) {
    RangeSlider(
        value = range,
        onValueChange = { range = it },
        valueRange = 0f..100f,
    )
    Text("Price ${range.start.toInt()} to ${range.endInclusive.toInt()}")
}

Parameters

Name	Type	Default	Description
`value`	`Float`		Current value.
`onValueChange`	`(Float) -> Unit`		Called continuously while dragging.
`valueRange`	`ClosedFloatingPointRange<Float>`	`0f..1f`	Minimum and maximum.
`steps`	`Int`	`0`	Number of discrete values between the ends.
`onValueChangeFinished`	`(() -> Unit)?`	`null`	Called once when the drag ends.

Guidelines

Do:

Use for approximate values.
Show the value.

Don't:

Do not place a slider in a horizontal scroller.
Do not use steps with more than about ten values.

Accessibility

Sliders expose their range and value. Arrow keys change the value, Page Up and Page Down jump.
Provide a visible label and the current value.
Do not rely on a slider for a value users must type exactly.