# Slider

> Picks a value or a range along a track. Continuous or in steps.

- Category: Selection and input
- API status: Stable
- Compose APIs: `Slider`, `RangeSlider`, `VerticalSlider`, `SliderDefaults`
- Interactive page: https://m3e.ljzapps.app/#components/slider

## When to use

Use a slider for values where the exact number matters less than the direction, such as volume or brightness. Add steps for discrete values and a RangeSlider to choose a minimum and maximum.

Show the current value as text next to the slider when precision matters.

## Playground

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

## Examples

### Continuous

```kotlin
var value by rememberSaveable { mutableFloatStateOf(0.3f) }

Column(Modifier.widthIn(max = 360.dp).fillMaxWidth()) {
    Slider(value = value, onValueChange = { value = it })
    Text("Volume ${(value * 100).toInt()}")
}
```

### Range

```kotlin
var range by remember { mutableStateOf(20f..70f) }

Column(Modifier.widthIn(max = 360.dp).fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(8.dp)) {
    RangeSlider(
        value = range,
        onValueChange = { range = it },
        valueRange = 0f..100f,
    )
    Text("Price ${range.start.toInt()} to ${range.endInclusive.toInt()}")
}
```

## Parameters

| Name | Type | Default | Description |
|---|---|---|---|
| `value` | `Float` |  | Current value. |
| `onValueChange` | `(Float) -> Unit` |  | Called continuously while dragging. |
| `valueRange` | `ClosedFloatingPointRange<Float>` | `0f..1f` | Minimum and maximum. |
| `steps` | `Int` | `0` | Number of discrete values between the ends. |
| `onValueChangeFinished` | `(() -> Unit)?` | `null` | Called once when the drag ends. |

## Guidelines

Do:
- Use for approximate values.
- Show the value.

Don't:
- Do not place a slider in a horizontal scroller.
- Do not use steps with more than about ten values.

## Accessibility

- Sliders expose their range and value. Arrow keys change the value, Page Up and Page Down jump.
- Provide a visible label and the current value.
- Do not rely on a slider for a value users must type exactly.

## Related components

- [Progress indicator](https://m3e.ljzapps.app/docs/components/progress-indicator.md)
- [Text field](https://m3e.ljzapps.app/docs/components/text-field.md)