Installation
Usage
Components
Slider (Root)
number | number[]
Controlled value(s).
number | number[]
Default value(s).
function
Callback when value changes.
number
default:"0"
Minimum value.
number
default:"100"
Maximum value.
number
default:"1"
Step increment.
string
default:"horizontal"
Orientation. Options:
horizontal, verticalboolean
Disable the slider.
SliderValue
Displays the current value(s).SliderControl
Container for the track and thumbs.SliderTrack
The track background.SliderIndicator
The filled portion of the track.SliderThumb
Draggable thumb control. Add multiple for range sliders.Examples
Basic Slider
Range Slider
With Custom Range
Vertical Slider
Accessibility
- Built on @base-ui/react for ARIA support
- Keyboard navigation (Arrow keys, Page Up/Down, Home, End)
- Focus visible ring on thumb
- Proper ARIA labels and values
- Screen reader announcements for value changes