Slider
Range slider built on Radix UI Slider. Allows users to select a numeric value within a defined range with configurable min, max, and step.
Basic
Preview
Custom Step
Preview
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Label text displayed above the slider. |
| defaultValue | number[] | - | Default slider value for uncontrolled usage. |
| value | number[] | - | Controlled slider value. |
| onValueChange | (value: number[]) => void | - | Callback fired when the slider value changes. |
| min | number | 0 | Minimum value of the slider range. |
| max | number | 100 | Maximum value of the slider range. |
| step | number | 1 | Step increment between values. |
| disabled | boolean | false | Whether the slider is disabled. |
| className | string | - | Additional CSS classes. |
Accessibility
- Built on Radix UI Slider which provides full WAI-ARIA slider role compliance
- Label is associated with the slider for screen reader support
- Navigable via arrow keys with
step-based increments - Current value, min, and max are conveyed to assistive technology via
aria-valuenow,aria-valuemin, andaria-valuemax HomeandEndkeys jump to minimum and maximum values respectively