The Slider component allows users to select a value or range of values by dragging a thumb along a track.
Installation
import {
Slider,
SliderValue,
SliderControl,
SliderTrack,
SliderIndicator,
SliderThumb,
} from "@craftdotui/baseui/components/slider";
<Slider defaultValue={50}>
<SliderControl>
<SliderTrack>
<SliderIndicator />
</SliderTrack>
<SliderThumb />
</SliderControl>
</Slider>
Components
Slider (Root)
Callback when value changes.
orientation
string
default:"horizontal"
Orientation. Options: horizontal, vertical
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
<Slider defaultValue={50}>
<SliderValue />
<SliderControl>
<SliderTrack>
<SliderIndicator />
</SliderTrack>
<SliderThumb />
</SliderControl>
</Slider>
Range Slider
<Slider defaultValue={[25, 75]}>
<SliderControl>
<SliderTrack>
<SliderIndicator />
</SliderTrack>
<SliderThumb />
<SliderThumb />
</SliderControl>
</Slider>
With Custom Range
<Slider min={0} max={200} step={10} defaultValue={50}>
<SliderValue />
<SliderControl>
<SliderTrack>
<SliderIndicator />
</SliderTrack>
<SliderThumb />
</SliderControl>
</Slider>
Vertical Slider
<Slider orientation="vertical" defaultValue={50}>
<SliderValue />
<SliderControl>
<SliderTrack>
<SliderIndicator />
</SliderTrack>
<SliderThumb />
</SliderControl>
</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