Slider
Range slider with keyboard, pointer drag, and full ARIA support. Horizontal or vertical orientation.
Example
Value: 50
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
value | number | — | No | Controlled value |
defaultValue | number | 0 | No | Initial value (uncontrolled) |
onChange | (value: number) => void | — | No | Called when value changes |
min | number | 0 | No | Minimum value |
max | number | 100 | No | Maximum value |
step | number | 1 | No | Step increment |
orientation | 'horizontal' | 'vertical' | 'horizontal' | No | Slider direction |
disabled | boolean | false | No | Disables the slider |
label | string | — | No | Accessible label for the slider thumb |
Accessibility
- role="slider" on thumb element
- aria-valuenow, aria-valuemin, aria-valuemax
- Arrow keys for step changes, PageUp/PageDown for large steps, Home/End for min/max
- aria-orientation for vertical sliders
Related Tokens
--slider-track--slider-fill--slider-thumb