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 aria-labelledby 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.
Use Cases
Volume and brightness controls
Price range filters
Image zoom or resize controls
Opacity and threshold adjustments
Best Practices
Do
- ✓ Show the current value alongside the slider
- ✓ Define meaningful min/max labels
- ✓ Use step values appropriate for the context
Don't
- ✗ Don't use for precise number entry — use NumberInput instead
- ✗ Don't set extremely large ranges with small steps
- ✗ Don't use without a visible value indicator