New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material 3 Compose

RangeSlider

Common

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.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.3.0-beta04")
}

Overloads

@Composable
@OptIn(ExperimentalMaterial3Api::class
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

namedescription
valuecurrent values of the RangeSlider. If either value is outside of [valueRange] provided, it will be coerced to this range.
onValueChangelambda in which values should be updated
modifiermodifiers for the Range Slider layout
enabledwhether or not component is enabled and can we interacted with or not
valueRangerange of values that Range Slider values can take. Passed [value] will be coerced to this range
stepsif 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.
onValueChangeFinishedlambda 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.
@ExperimentalMaterial3Api
@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
)

Parameters

namedescription
valuecurrent values of the RangeSlider. If either value is outside of [valueRange] provided, it will be coerced to this range.
onValueChangelambda in which values should be updated
modifiermodifiers for the Range Slider layout
enabledwhether or not component is enabled and can we interacted with or not
onValueChangeFinishedlambda 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.
startInteractionSourcethe [MutableInteractionSource] representing the stream of [Interaction]s for the start thumb. You can create and pass in your own remembered instance to observe.
endInteractionSourcethe [MutableInteractionSource] representing the stream of [Interaction]s for the end thumb. You can create and pass in your own remembered instance to observe.
stepsif 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.
startThumbthe start thumb to be displayed on the Range Slider. The lambda receives a [RangeSliderState] which is used to obtain the current active track.
endThumbthe end thumb to be displayed on the Range Slider. The lambda receives a [RangeSliderState] which is used to obtain the current active track.
trackthe 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.
valueRangerange of values that Range Slider values can take. Passed [value] will be coerced to this range.
@ExperimentalMaterial3Api
@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
        )
    }
)

Parameters

namedescription
state[RangeSliderState] which contains the current values of the RangeSlider.
modifiermodifiers for the Range Slider layout
enabledwhether 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.
startInteractionSourcethe [MutableInteractionSource] representing the stream of [Interaction]s for the start thumb. You can create and pass in your own remembered instance to observe.
endInteractionSourcethe [MutableInteractionSource] representing the stream of [Interaction]s for the end thumb. You can create and pass in your own remembered instance to observe.
startThumbthe start thumb to be displayed on the Range Slider. The lambda receives a [RangeSliderState] which is used to obtain the current active track.
endThumbthe end thumb to be displayed on the Range Slider. The lambda receives a [RangeSliderState] which is used to obtain the current active track.
trackthe 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.

Code Examples

RangeSliderSample

@Composable
@Sampled
@Preview
@OptIn(ExperimentalMaterial3Api::class
fun RangeSliderSample() {
    val rangeSliderState = remember {
        RangeSliderState(
            0f,
            100f,
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            }
        )
    }
    Column(modifier = Modifier.padding(horizontal = 16.dp)) {
        val rangeStart = "%.2f".format(rangeSliderState.activeRangeStart)
        val rangeEnd = "%.2f".format(rangeSliderState.activeRangeEnd)
        Text(text = "$rangeStart .. $rangeEnd")
        RangeSlider(
            state = rangeSliderState,
            modifier = Modifier.semantics { contentDescription = "Localized Description" }
        )
    }
}

StepRangeSliderSample

@Composable
@Sampled
@Preview
@OptIn(ExperimentalMaterial3Api::class
fun StepRangeSliderSample() {
    val rangeSliderState = remember {
        RangeSliderState(
            0f,
            100f,
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            },
            // Only allow multiples of 10. Excluding the endpoints of `valueRange`,
            // there are 9 steps (10, 20, ..., 90).
            steps = 9
        )
    }
    Column(modifier = Modifier.padding(horizontal = 16.dp)) {
        val rangeStart = rangeSliderState.activeRangeStart.roundToInt()
        val rangeEnd = rangeSliderState.activeRangeEnd.roundToInt()
        Text(text = "$rangeStart .. $rangeEnd")
        RangeSlider(
            state = rangeSliderState,
            modifier = Modifier.semantics { contentDescription = "Localized Description" }
        )
    }
}

RangeSliderWithCustomComponents

@Composable
@Sampled
@Preview
@OptIn(ExperimentalMaterial3Api::class
fun RangeSliderWithCustomComponents() {
    val rangeSliderState = remember {
        RangeSliderState(
            0f,
            100f,
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            }
        )
    }
    val startInteractionSource = remember { MutableInteractionSource() }
    val endInteractionSource = remember { MutableInteractionSource() }
    val startThumbAndTrackColors =
        SliderDefaults.colors(thumbColor = Color.Blue, activeTrackColor = Color.Red)
    val endThumbColors = SliderDefaults.colors(thumbColor = Color.Green)
    Column(modifier = Modifier.padding(horizontal = 16.dp)) {
        RangeSlider(
            state = rangeSliderState,
            modifier = Modifier.semantics { contentDescription = "Localized Description" },
            startInteractionSource = startInteractionSource,
            endInteractionSource = endInteractionSource,
            startThumb = {
                Label(
                    label = {
                        PlainTooltip(modifier = Modifier.sizeIn(45.dp, 25.dp).wrapContentWidth()) {
                            Text("%.2f".format(rangeSliderState.activeRangeStart))
                        }
                    },
                    interactionSource = startInteractionSource
                ) {
                    SliderDefaults.Thumb(
                        interactionSource = startInteractionSource,
                        colors = startThumbAndTrackColors
                    )
                }
            },
            endThumb = {
                Label(
                    label = {
                        PlainTooltip(
                            modifier = Modifier.requiredSize(45.dp, 25.dp).wrapContentWidth()
                        ) {
                            Text("%.2f".format(rangeSliderState.activeRangeEnd))
                        }
                    },
                    interactionSource = endInteractionSource
                ) {
                    SliderDefaults.Thumb(
                        interactionSource = endInteractionSource,
                        colors = endThumbColors
                    )
                }
            },
            track = { rangeSliderState ->
                SliderDefaults.Track(
                    colors = startThumbAndTrackColors,
                    rangeSliderState = rangeSliderState
                )
            }
        )
    }
}