Slider
ProA range input with a draggable thumb on a track for selecting a numeric value within defined bounds. Shows a filled track segment indicating the current value. Includes an optional label and live value display. Used for volume, brightness, price ranges, and similar continuous adjustments.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Single | ||
| Range | ||
| With Marks |
Usage Guidelines
Do
Display the current value alongside the slider.
Don't
Use a slider for selecting from a small set of discrete options — use Radio or Segmented Control.
Do
Use clear min/max labels so users understand the range.
Don't
Omit the current value display — users need feedback.
Do
Provide a complementary number input for precise values when needed.
Don't
Set an unreasonably large range that makes precision difficult.
Code
Design Tokens
Accessibility
- Uses role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow.
- aria-label or aria-labelledby provides accessible name.
- Value updates are announced to screen readers.