Vertical slider

A slider that runs top to bottom, for levels, equalizers and mixers.

Category: Selection and input
API status: Expressive
Compose APIs: VerticalSlider, rememberSliderState, SliderState
Interactive page: https://m3e.ljzapps.app/#components/vertical-slider

When to use

Use a vertical slider when the value is a level or amount that people compare across several controls, such as an equalizer. It is driven by a SliderState instead of a value and a callback.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Equalizer

Row(horizontalArrangement = Arrangement.spacedBy(24.dp)) {
    listOf("Bass", "Mid", "Treble").forEach { label ->
        androidx.compose.foundation.layout.Column(horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally) {
            VerticalSlider(state = rememberSliderState(value = 0.5f), modifier = Modifier.height(160.dp))
            Text(label)
        }
    }
}

Parameters

Name	Type	Default	Description
`state`	`SliderState`		rememberSliderState(value, steps, valueRange).
`reverseDirection`	`Boolean`	`false`	Puts the minimum at the top.
`modifier`	`Modifier`	`Modifier`	Give the slider a height.

Guidelines

Do:

Align sliders on a common baseline.
Label each slider.

Don't:

Do not use for precise numeric input.
Do not place in a vertical scroller.

Accessibility

Arrow keys change the value. Label every slider and expose its value as text.