A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage.
ts
| Guidance | Practices |
|---|---|
| Do | Always provide a label, even if visually hidden, so the slider is accessible to screen readers. |
| Do | Format values with meaningful units like "$50" or "75%" instead of raw numbers. |
| Don't | Use for precise numeric entry; pair with a text input or use NumberInput instead. |
| Don't | Set a step size so large that only a few positions are possible; use SegmentedControl or radio buttons instead. |
Slider with custom formatting showing temperature in Fahrenheit.
Sliders with error, warning, and success validation states.