# 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

```kotlin
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.

## Related components

- [Slider](https://m3e.ljzapps.app/docs/components/slider.md)
- [Progress indicator](https://m3e.ljzapps.app/docs/components/progress-indicator.md)