Sliders

Sliders allow users to make selections from a range of values.


On this page

Specifications references

Accessibility

Please follow accessibility criteria for development.

Variants

Continuous slider

Continuous sliders allow users to make meaningful selections that don’t require a specific value.

Continuous slider Continuous slider dark

With icons:

Continuous slider with icons Continuous slider with icons dark

Jetpack Compose

In your composable screen you can use:

OdsSlider(
    value = 20f,
    steps = 9,
    onValueChange = { doSomething() }
)

You can add icons to the continuous slider like this:

OdsSlider(
    value = 20f,
    steps = 9,
    onValueChange = { doSomething() },
    startIcon = OdsSlider.Icon(
        painterResource(id = R.drawable.ic_volume_status_1),
        stringResource(id = R.string.component_slider_low_volume)
    ),
    endIcon = OdsSlider.Icon(
        painterResource(id = R.drawable.ic_volume_status_4),
        stringResource(id = R.string.component_slider_high_volume)
    )
)
OdsSlider API
Parameter Default value Description
value: Float   Current value of the slider. If outside of valueRange provided, value will be coerced to this range.
onValueChange: (Float) -> Unit   Callback invoked on slider value change. value should be updated here.
modifier: Modifier Modifier Modifier applied to the slider
enabled: Boolean true Controls the enabled state of the slider. If false, the user cannot interact with it.
valueRange: ClosedFloatingPointRange<Float> 0f..1f Range of values that the slider can take. Given value will be coerced to this range.
steps: Int 0 If greater than 0, specifies the amounts of discrete values, evenly distributed between across the whole value range. If 0, slider will behave as a continuous slider and allow to choose any value from the range specified. Must not be negative.
onValueChangeFinished: (() -> Unit)? null Callback invoked when value change has ended. This callback shouldn’t be used to update the slider value (use onValueChange for that), but rather to know when the user has completed selecting a new value by ending a drag or a click.
startIcon: OdsSlider.Icon? null Icon displayed at the start of the slider
endIcon: OdsSlider.Icon? null Icon displayed at the end of the slider

Continuous lockups slider

Continuous lockups slider Continuous lockups slider dark

With icons:

Continuous lockups slider with icons Continuous lockups slider with icons dark

Jetpack Compose

In your composable screen you can use:

OdsSliderLockups(
    value = 20f,
    valueRange = 0f..100f,
    onValueChange = { doSomething() }
)

You can add icons to the continuous lockups slider like this:

OdsSliderLockups(
    value = 20f,
    valueRange = 0f..100f,
    onValueChange = { doSomething() },
    startIcon = OdsSlider.Icon(
        painterResource(id = R.drawable.ic_volume_status_1),
        stringResource(id = R.string.component_slider_low_volume)
    ),
    endIcon = OdsSlider.Icon(
        painterResource(id = R.drawable.ic_volume_status_4),
        stringResource(id = R.string.component_slider_high_volume)
    )
)
OdsSliderLockups API
Parameter Default value Description
value: Float   Current value of the slider. If outside of valueRange provided, value will be coerced to this range.
onValueChange: (Float) -> Unit   Callback invoked on slider value change. value should be updated here.
modifier: Modifier Modifier Modifier applied to the slider
enabled: Boolean true Controls the enabled state of the slider. If false, the user cannot interact with it.
valueRange: ClosedFloatingPointRange<Float> 0f..1f Range of values that the slider can take. Given value will be coerced to this range.
steps: Int 0 If greater than 0, specifies the amounts of discrete values, evenly distributed between across the whole value range. If 0, slider will behave as a continuous slider and allow to choose any value from the range specified. Must not be negative.
onValueChangeFinished: (() -> Unit)? null Callback invoked when value change has ended. This callback shouldn’t be used to update the slider value (use onValueChange for that), but rather to know when the user has completed selecting a new value by ending a drag or a click.
startIcon: OdsSlider.Icon? null Icon displayed at the start of the slider
endIcon: OdsSlider.Icon? null Icon displayed at the end of the slider

Discrete slider

Discrete sliders display a numeric value label upon pressing the thumb, which allows a user to input an exact value.

Discrete slider Discrete slider dark

With icons:

Discrete slider with icon Discrete slider with icon dark

Jetpack Compose

In your composable screen you can use:

OdsSlider(
    value = 20f,
    valueRange = 0f..100f,
    steps = 10,
    onValueChange = { doSomething() }
)

You can add icons to the discrete slider like this:

OdsSlider(
    value = 20f,
    valueRange = 0f..100f,
    steps = 10,
    onValueChange = { doSomething() },
    startIcon = OdsSlider.Icon(
        painterResource(id = R.drawable.ic_volume_status_1),
        stringResource(id = R.string.component_slider_low_volume)
    ),
    endIcon = OdsSlider.Icon(
        painterResource(id = R.drawable.ic_volume_status_4),
        stringResource(id = R.string.component_slider_high_volume)
    )
)

Use OdsSlider API.

Discrete lockups slider

Discrete lockups slider Discrete lockups slider dark

With icons:

Discrete lockups slider with icons Discrete lockups slider with icons dark

Jetpack Compose

In your composable screen you can use:

OdsSliderLockups(
    value = 20f,
    valueRange = 0f..100f,
    steps = 10,
    onValueChange = { doSomething() }
)

You can add icons to the continuous lockups slider like this:

OdsSliderLockups(
    value = 20f,
    valueRange = 0f..100f,
    steps = 10,
    onValueChange = { doSomething() },
    startIcon = OdsSlider.Icon(
        painterResource(id = R.drawable.ic_volume_status_1),
        stringResource(id = R.string.component_slider_low_volume)
    ),
    endIcon = OdsSlider.Icon(
        painterResource(id = R.drawable.ic_volume_status_4),
        stringResource(id = R.string.component_slider_high_volume)
    )
)

Use OdsSliderLockups API.