← Back to Material 3 Compose
RangeSlider
Component
in
Material 3
. Since 1.0.0Overview
Code Examples
<a href="https://m3.material.io/components/sliders/overview" class="external" target="_blank">Material Design Range slider</a>.
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:
Overloads
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()
)
Parameters
Name | Description |
---|---|
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 greater than 0, specifies the amounts of discrete values, evenly distributed between across the whole value range. If 0, range slider will behave as a continuous slider and allow to choose any value from the range specified. 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 |
RangeSlider
@Composable
@ExperimentalMaterial3Api
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 (SliderPositions) -> Unit = {
SliderDefaults.Thumb(
interactionSource = startInteractionSource,
colors = colors,
enabled = enabled
)
},
endThumb: @Composable (SliderPositions) -> Unit = {
SliderDefaults.Thumb(
interactionSource = endInteractionSource,
colors = colors,
enabled = enabled
)
},
track: @Composable (SliderPositions) -> Unit = { sliderPositions ->
SliderDefaults.Track(
colors = colors,
enabled = enabled,
sliderPositions = sliderPositions
)
},
/*@IntRange(from = 0)*/
steps: Int = 0,
)
Parameters
Name | Description |
---|---|
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 greater than 0, specifies the amounts of discrete values, evenly distributed between across the whole value range. If 0, range slider will behave as a continuous slider and allow to choose any value from the range specified. 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. |
startInteractionSource | the MutableInteractionSource representing the stream of Interactions for the start thumb. You can create and pass in your own remember ed instance to observe. |
endInteractionSource | the MutableInteractionSource representing the stream of Interactions for the end thumb. You can create and pass in your own remember ed instance to observe. |
startThumb | the start thumb to be displayed on the Range Slider. The lambda receives a SliderPositions which is used to obtain the current active track and the tick positions if the range slider is discrete. |
endThumb | the end thumb to be displayed on the Range Slider. The lambda receives a SliderPositions which is used to obtain the current active track and the tick positions if the range slider is discrete. |
track | the track to be displayed on the range slider, it is placed underneath the thumb. The lambda receives a SliderPositions which is used to obtain the current active track and the tick positions if the range slider is discrete |