Slider

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

Material Design slider.

Sliders allow users to make selections from a range of values.

It uses SliderDefaults.Thumb and SliderDefaults.Track as the thumb and track.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Use continuous sliders to allow users to make meaningful selections that don’t require a specific value:

Parameters

value

current value of the slider. If outside of valueRange provided, value will be coerced to this range.

onValueChange

callback in which value should be updated

modifier

the Modifier to be applied to this slider

enabled

controls the enabled state of this slider. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

valueRange

range of values that this slider can take. The passed value will be coerced to this range.

steps

if positive, specifies the amount of discrete allowable values (in addition to the endpoints of the value range). Step values are evenly distributed across the range. If 0, the slider will behave continuously and allow any value from the range. Must not be negative.

onValueChangeFinished

called when value change has ended. This should not be used to update the slider value (use onValueChange instead), but rather to know when the user has completed selecting a new value by ending a drag or a click.

colors

SliderColors that will be used to resolve the colors used for this slider in different states. See SliderDefaults.colors.

interactionSource

the MutableInteractionSource representing the stream of Interactions for this slider. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this slider in different states.

Samples

androidx.compose.material3.samples.SliderSampleandroidx.compose.material3.samples.StepsSliderSample
@Composable
fun Slider(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, onValueChangeFinished: () -> Unit? = null, colors: SliderColors = SliderDefaults.colors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, @IntRange(from = 0) steps: Int = 0, thumb: @Composable (SliderState) -> Unit = { SliderDefaults.Thumb( interactionSource = interactionSource, colors = colors, enabled = enabled ) }, track: @Composable (SliderState) -> Unit = { sliderState -> SliderDefaults.Track(colors = colors, enabled = enabled, sliderState = sliderState) }, valueRange: ClosedFloatingPointRange<Float> = 0f..1f)

Material Design slider.

Sliders allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Use continuous sliders to allow users to make meaningful selections that don’t require a specific value:

Parameters

value

current value of the slider. If outside of valueRange provided, value will be coerced to this range.

onValueChange

callback in which value should be updated

modifier

the Modifier to be applied to this slider

enabled

controls the enabled state of this slider. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

onValueChangeFinished

called when value change has ended. This should not be used to update the slider value (use onValueChange instead), but rather to know when the user has completed selecting a new value by ending a drag or a click.

colors

SliderColors that will be used to resolve the colors used for this slider in different states. See SliderDefaults.colors.

interactionSource

the MutableInteractionSource representing the stream of Interactions for this slider. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this slider in different states.

steps

if positive, specifies the amount of discrete allowable values (in addition to the endpoints of the value range). Step values are evenly distributed across the range. If 0, the slider will behave continuously and allow any value from the range. Must not be negative.

thumb

the thumb to be displayed on the slider, it is placed on top of the track. The lambda receives a SliderState which is used to obtain the current active track.

track

the track to be displayed on the slider, it is placed underneath the thumb. The lambda receives a SliderState which is used to obtain the current active track.

valueRange

range of values that this slider can take. The passed value will be coerced to this range.

Samples

androidx.compose.material3.samples.SliderSampleandroidx.compose.material3.samples.StepsSliderSampleandroidx.compose.material3.samples.SliderWithCustomThumbSampleandroidx.compose.material3.samples.SliderWithCustomTrackAndThumb
@Composable
fun Slider(state: SliderState, modifier: Modifier = Modifier, enabled: Boolean = true, colors: SliderColors = SliderDefaults.colors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, thumb: @Composable (SliderState) -> Unit = { SliderDefaults.Thumb( interactionSource = interactionSource, colors = colors, enabled = enabled ) }, track: @Composable (SliderState) -> Unit = { sliderState -> SliderDefaults.Track(colors = colors, enabled = enabled, sliderState = sliderState) })

Material Design slider.

Sliders allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Use continuous sliders to allow users to make meaningful selections that don’t require a specific value:

Parameters

state

SliderState which contains the slider's current value.

modifier

the Modifier to be applied to this slider

enabled

controls the enabled state of this slider. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

colors

SliderColors that will be used to resolve the colors used for this slider in different states. See SliderDefaults.colors.

interactionSource

the MutableInteractionSource representing the stream of Interactions for this slider. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this slider in different states.

thumb

the thumb to be displayed on the slider, it is placed on top of the track. The lambda receives a SliderState which is used to obtain the current active track.

track

the track to be displayed on the slider, it is placed underneath the thumb. The lambda receives a SliderState which is used to obtain the current active track.

Samples

androidx.compose.material3.samples.SliderSampleandroidx.compose.material3.samples.StepsSliderSampleandroidx.compose.material3.samples.SliderWithCustomThumbSampleandroidx.compose.material3.samples.SliderWithCustomTrackAndThumb