Composable Component

InlineSlider

InlineSlider allows users to make a selection from a range of values.

InlineSliderSample

@Composable
fun InlineSliderSample() {
    var value by remember { mutableStateOf(4.5f) }
    InlineSlider(
        value = value,
        onValueChange = { value = it },
        increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") },
        decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") },
        valueRange = 3f..6f,
        steps = 5,
        segmented = false,
    )
}

InlineSliderSegmentedSample

@Composable
fun InlineSliderSegmentedSample() {
    var value by remember { mutableStateOf(2f) }
    InlineSlider(
        value = value,
        onValueChange = { value = it },
        increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") },
        decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") },
        valueRange = 1f..4f,
        steps = 7,
        segmented = true,
    )
}

InlineSliderWithIntegerSample

@Composable
fun InlineSliderWithIntegerSample() {
    var value by remember { mutableStateOf(4) }
    InlineSlider(
        value = value,
        onValueChange = { value = it },
        increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") },
        decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") },
        valueProgression = 0..10,
        segmented = false,
    )
}