Sliders let users pick a numeric value, or a range between two thumbs, by dragging along a bounded track, trading typed precision for speed and feel.
Sliders let users pick a numeric value, or a range between two thumbs, by dragging along a bounded track, trading typed precision for speed and feel.
Change the props and copy the result. The values select stands for the defaultValue prop: single emits defaultValue={50} and range emits defaultValue={[25, 75]}, and both reach the snippet.
The preview remounts when the values select changes
defaultValue is uncontrolled and applies on mount only, so swapping between single and range resets the slider rather than pretending the prop can change live. Everything else in the rail is a real prop applied in place.
One component from one module: pass one number for a single thumb, or an array for a dual-thumb range on the same track.
| Component | Description | Import from |
|---|---|---|
| Slider | The whole control: track, fill, and one thumb per value, built on React Aria’s Slider. | @/components/base/slider/slider |
3 label positions by 2 value forms, all live: drag any of them. The value labels are absolutely positioned and take no layout space, so each row here reserves its own clearance, which is exactly what a product screen must do too. The handle is 24px with a 2px inset brand border and the rail is 8px, matching the Figma sheet pixel for pixel.
The slider has fewer painted states than most controls, and every claim here is measured rather than assumed. Disabled is a real prop on the live example below; focus-visible cannot be forced from outside, so Tab to the rest example and watch the thumb take a 2px outline.
Disabled paints; hover does not
The disabled example above is really disabled: it ignores the pointer, leaves the tab order, and looks it, the track, fill and thumb muted and the cursor not-allowed (a dated kit edit; the Figma sheet draws no disabled treatment, so this is DrumKit’s). Hover paints nothing: the sheet’s Hover handle variants are pixel-identical to Default, measured in this page’s parity audit, and the kit only swaps the cursor to grab. The other states that paint are focus-visible, the 2px outline, and dragging, which switches the cursor to grabbing.