Sliders
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
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.
Demo
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.
The family
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 |
The variant space
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.
States
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 and hover paint nothing
The disabled example above is really disabled: it ignores the pointer and leaves the tab order, yet looks identical to rest, because the kit ships no disabled treatment and the Figma sheet draws none either. Hover is the same story: 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 states that do paint are focus-visible, the 2px outline, and dragging, which switches the cursor to grabbing.