Material 3 Sliders in Jetpack Compose

Get started with Material 3 sliders in Jetpack Compose to create user-friendly interfaces for selecting single or range values.

Explore Slider Styles

Learn to implement two Material 3 slider types for value selection.

Slider (Single Value)

Allows selection of a single value from a continuous or discrete range.

@Preview
@Composable
fun SliderMinimalExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it }
        )
        Text(text = sliderPosition.toString())
    }
}
  

Use a Slider when you want to select a single value.

Examples:

• Adjust volume in a media app
• Set brightness in a settings panel
• Choose a rating in a review form

---

Advanced Slider

Allows single value selection with custom colors, range, and discrete steps.

@Preview
@Composable
fun SliderAdvancedExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            colors = SliderDefaults.colors(
                thumbColor = MaterialTheme.colorScheme.secondary,
                activeTrackColor = MaterialTheme.colorScheme.secondary,
                inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer,
            ),
            steps = 3,
            valueRange = 0f..50f
        )
        Text(text = sliderPosition.toString())
    }
}
  

Use an Advanced Slider when you want to customize range, steps, and appearance.

Examples:

• Filter data in a graph
• Set discrete levels in a settings menu
• Adjust specific values in a form

---

Range Slider

Allows selection of a start and end value from a range.

@Preview
@Composable
fun RangeSliderExample() {
    var sliderPosition by remember { mutableStateOf(0f..100f) }
    Column {
        RangeSlider(
            value = sliderPosition,
            steps = 5,
            onValueChange = { range -> sliderPosition = range },
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            }
        )
        Text(text = sliderPosition.toString())
    }
}
  

Use a Range Slider when you want to select a start and end value.

Examples:

• Filter price ranges in an e-commerce app
• Select time ranges in a scheduling app
• Choose value ranges in a data analysis tool

---

Slider Properties

Understand the key properties used in the slider examples.

Property	Usage
value*	Required: Current value (Float for Slider, ClosedFloatingPointRange for RangeSlider)
onValueChange*	Required: Callback for value changes
enabled	Controls if the slider is interactive
valueRange	Defines the range of selectable values
steps	Sets number of discrete intervals (excluding start/end)
colors	Customizes thumb and track colors
onValueChangeFinished	Callback when value change is complete (RangeSlider only)