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
Terminalbash
Usage
Reacttsx
Examples
With Label and Value Display
50%
tsx
Different Ranges
Range: -10°C to 40°C
tsx
Different Step Sizes
tsx
Disabled State
tsx
Volume Control
80%
tsx
Range Slider (Two Thumbs)
$20 - $80
Drag either handle to adjust the range
tsx
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.