RangeSlider

Functions summary

Unit
@Composable
@ExperimentalMaterialApi
RangeSlider(
    value: ClosedFloatingPointRange<Float>,
    onValueChange: (ClosedFloatingPointRange<Float>) -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    valueRange: ClosedFloatingPointRange<Float>,
    steps: @IntRange(from = 0) Int,
    onValueChangeFinished: (() -> Unit)?,
    colors: SliderColors
)

Material Design slider
Cmn

Functions

RangeSlider

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

Material Design 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:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.RangeSlider
import androidx.compose.material.Slider
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var sliderPosition by remember { mutableStateOf(0f..100f) }
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    val rangeStart = "%.2f".format(sliderPosition.start)
    val rangeEnd = "%.2f".format(sliderPosition.endInclusive)
    Text(text = "$rangeStart .. $rangeEnd")
    RangeSlider(
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
    )
}

You can allow the user to choose only between predefined set of values by specifying the amount of steps between min and max values:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.RangeSlider
import androidx.compose.material.Slider
import androidx.compose.material.SliderDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var sliderPosition by remember { mutableStateOf(0f..100f) }
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    val rangeStart = sliderPosition.start.roundToInt()
    val rangeEnd = sliderPosition.endInclusive.roundToInt()
    Text(text = "$rangeStart .. $rangeEnd")
    RangeSlider(
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        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,
        colors =
            SliderDefaults.colors(
                thumbColor = MaterialTheme.colors.secondary,
                activeTrackColor = MaterialTheme.colors.secondary,
            ),
    )
}
Parameters
value: ClosedFloatingPointRange<Float>

current values of the RangeSlider. If either value is outside of valueRange provided, it will be coerced to this range.
onValueChange: (ClosedFloatingPointRange<Float>) -> Unit

lambda in which values should be updated
modifier: Modifier = Modifier

modifiers for the Range Slider layout
enabled: Boolean = true

whether or not component is enabled and can we interacted with or not
valueRange: ClosedFloatingPointRange<Float> = 0f..1f

range of values that Range Slider values can take. Passed value will be coerced to this range
steps: @IntRange(from = 0) Int = 0

if positive, specifies the amount of discrete allowable values between the endpoints of valueRange. For example, a range from 0 to 10 with 4 steps allows 4 values evenly distributed between 0 and 10 (i.e., 2, 4, 6, 8). If steps is 0, the slider will behave continuously and allow any value from the range. Must not be negative.
onValueChangeFinished: (() -> Unit)? = null

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 = SliderDefaults.colors()

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