Slider
Select a numeric value from a range. Supports single value, range selection, custom steps, and full RTL support with proper handle orientation.
Preview
Installation
Usage
Examples
With Label and Value Display
Different Ranges
Range: -10°C to 40°C
Different Step Sizes
Disabled State
Volume Control
Range Slider (Two Thumbs)
Drag either handle to adjust the range
Props
| Name | Type | Default | Description |
|---|---|---|---|
value | number[] | [0] | The controlled value(s) of the slider |
defaultValue | number[] | [0] | The default value(s) (uncontrolled) |
onValueChange | (value: number[]) => void | undefined | Event handler called when the value changes |
min | number | 0 | The minimum value of the slider |
max | number | 100 | The maximum value of the slider |
step | number | 1 | The step increment for value changes |
disabled | boolean | false | Disables the slider |
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the slider |
Note: The value prop is always an array. Use [value] for single thumb sliders and [min, max] for range sliders.
Accessibility
Keyboard Navigation
- Tab: Move focus to/from slider
- Arrow Right/Up: Increase value
- Arrow Left/Down: Decrease value
- Home: Jump to minimum
- End: Jump to maximum
- Page Up/Down: Increase/decrease by larger step
Labels and ARIA
Always provide a label using the htmlFor and id attributes, or use aria-label for sliders without visible labels.
Screen Readers
Screen readers announce the slider role, current value, min, max, and orientation. For example: "Volume, slider, 50, minimum 0, maximum 100".
Value Display
Always display the current value visually, as it's announced by screen readers but may not be obvious to sighted users.
RTL Considerations
Sliders automatically support RTL layout. In RTL mode, the slider direction is mirrored - minimum starts on the right and maximum on the left.
LTR (English)
Min (left) → Max (right)
RTL (العربية)
الحد الأدنى (يمين) ← الحد الأقصى (يسار)