RangeSlider

@Composable
fun RangeSlider(value: ClosedFloatingPointRange<Float>, onValueChange: (ClosedFloatingPointRange<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())

Material Design Range slider.

Range Sliders expand upon Slider using the same concepts but allow the user to select 2 values.

The two values are still bounded by the value range but they also cannot cross each other.

Use continuous Range Sliders to allow users to make meaningful selections that don’t require a specific values:

Parameters

value

current values of the RangeSlider. If either value is outside of valueRange provided, it will be coerced to this range.

onValueChange

lambda in which values should be updated

modifier

modifiers for the Range Slider layout

enabled

whether or not component is enabled and can we interacted with or not

valueRange

range of values that Range Slider values can take. 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 range slider will behave continuously and allow any value from the range. Must not be negative.

onValueChangeFinished

lambda to be invoked when value change has ended. This callback shouldn't be used to update the range slider values (use onValueChange for that), 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 determine the color of the Range Slider parts in different state. See SliderDefaults.colors to customize.

Samples

androidx.compose.material3.samples.RangeSliderSampleandroidx.compose.material3.samples.StepRangeSliderSample
@Composable
fun RangeSlider(value: ClosedFloatingPointRange<Float>, onValueChange: (ClosedFloatingPointRange<Float>) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, onValueChangeFinished: () -> Unit? = null, colors: SliderColors = SliderDefaults.colors(), startInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, endInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, startThumb: @Composable (RangeSliderState) -> Unit = { SliderDefaults.Thumb( interactionSource = startInteractionSource, colors = colors, enabled = enabled ) }, endThumb: @Composable (RangeSliderState) -> Unit = { SliderDefaults.Thumb( interactionSource = endInteractionSource, colors = colors, enabled = enabled ) }, track: @Composable (RangeSliderState) -> Unit = { rangeSliderState -> SliderDefaults.Track( colors = colors, enabled = enabled, rangeSliderState = rangeSliderState ) }, @IntRange(from = 0) steps: Int = 0)

Material Design Range slider.

Range Sliders expand upon Slider using the same concepts but allow the user to select 2 values.

The two values are still bounded by the value range but they also cannot cross each other.

It uses the provided startThumb for the slider's start thumb and endThumb for the slider's end thumb. It also uses the provided track for the slider's track. If nothing is passed for these parameters, it will use SliderDefaults.Thumb and SliderDefaults.Track for the thumbs and track.

Use continuous Range Sliders to allow users to make meaningful selections that don’t require a specific values:

Parameters

value

current values of the RangeSlider. If either value is outside of valueRange provided, it will be coerced to this range.

onValueChange

lambda in which values should be updated

modifier

modifiers for the Range Slider layout

enabled

whether or not component is enabled and can we interacted with or not

onValueChangeFinished

lambda to be invoked when value change has ended. This callback shouldn't be used to update the range slider values (use onValueChange for that), 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 determine the color of the Range Slider parts in different state. See SliderDefaults.colors to customize.

startInteractionSource

the MutableInteractionSource representing the stream of Interactions for the start thumb. You can create and pass in your own remembered instance to observe.

endInteractionSource

the MutableInteractionSource representing the stream of Interactions for the end thumb. You can create and pass in your own remembered instance to observe.

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 range slider will behave continuously and allow any value from the range. Must not be negative.

startThumb

the start thumb to be displayed on the Range Slider. The lambda receives a RangeSliderState which is used to obtain the current active track.

endThumb

the end thumb to be displayed on the Range Slider. The lambda receives a RangeSliderState which is used to obtain the current active track.

track

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

valueRange

range of values that Range Slider values can take. Passed value will be coerced to this range.

Samples

androidx.compose.material3.samples.RangeSliderSampleandroidx.compose.material3.samples.StepRangeSliderSampleandroidx.compose.material3.samples.RangeSliderWithCustomComponents
@Composable
fun RangeSlider(state: RangeSliderState, modifier: Modifier = Modifier, enabled: Boolean = true, colors: SliderColors = SliderDefaults.colors(), startInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, endInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, startThumb: @Composable (RangeSliderState) -> Unit = { SliderDefaults.Thumb( interactionSource = startInteractionSource, colors = colors, enabled = enabled ) }, endThumb: @Composable (RangeSliderState) -> Unit = { SliderDefaults.Thumb( interactionSource = endInteractionSource, colors = colors, enabled = enabled ) }, track: @Composable (RangeSliderState) -> Unit = { rangeSliderState -> SliderDefaults.Track( colors = colors, enabled = enabled, rangeSliderState = rangeSliderState ) })

Material Design Range slider.

Range Sliders expand upon Slider using the same concepts but allow the user to select 2 values.

The two values are still bounded by the value range but they also cannot cross each other.

It uses the provided startThumb for the slider's start thumb and endThumb for the slider's end thumb. It also uses the provided track for the slider's track. If nothing is passed for these parameters, it will use SliderDefaults.Thumb and SliderDefaults.Track for the thumbs and track.

Use continuous Range Sliders to allow users to make meaningful selections that don’t require a specific values:

Parameters

state

RangeSliderState which contains the current values of the RangeSlider.

modifier

modifiers for the Range Slider layout

enabled

whether or not component is enabled and can we interacted with or not

colors

SliderColors that will be used to determine the color of the Range Slider parts in different state. See SliderDefaults.colors to customize.

startInteractionSource

the MutableInteractionSource representing the stream of Interactions for the start thumb. You can create and pass in your own remembered instance to observe.

endInteractionSource

the MutableInteractionSource representing the stream of Interactions for the end thumb. You can create and pass in your own remembered instance to observe.

startThumb

the start thumb to be displayed on the Range Slider. The lambda receives a RangeSliderState which is used to obtain the current active track.

endThumb

the end thumb to be displayed on the Range Slider. The lambda receives a RangeSliderState which is used to obtain the current active track.

track

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

Samples

androidx.compose.material3.samples.RangeSliderSampleandroidx.compose.material3.samples.StepRangeSliderSampleandroidx.compose.material3.samples.RangeSliderWithCustomComponents