Forms
Slider
Slider is a single-value control for selecting a number within min/max by dragging or keyboard-adjusting a thumb along a track.
State (Default/Hover/Focused/Disabled) — 4 variants
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-09-13
- Documentation last updated
- 2026-09-13
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.1.0-beta
Known open questions
- Figma Style (Success/Warning/Danger) prose in older docs is superseded by verified State variants — no status-color Style prop in Beta.
- Dual-thumb range and vertical orientation are not in the verified Figma component set.
- Individual /r manifest deferred to CE-3 — not part of the current 8-component + foundation distribution cut.
Live preview
Default / Disabled
Controlled
Step
Purpose
Slider is a single-value control for selecting a numeric value within a defined min/max by dragging a thumb along a track or adjusting with the keyboard.
Anatomy
Slider = visible label + role=slider control (track + fill + thumb).
Variants and states
default · hover · focused · disabled
When to use
A value with a naturally continuous or steppable range where dragging is more intuitive than typing (volume, brightness, intensity).
When not to use
When precise exact-number entry matters more than approximate visual positioning — use Text Input, or pair both.
Accessibility
Renders as role="slider" with aria-valuenow/min/max and a visible label. Supports arrow keys, Home/End, and Page Up/Down — not drag alone.
Keyboard behavior
Arrow keys adjust by step; Home/End jump to min/max; Page Up/Down move by ~10% of the range (snapped to step). Pointer drag and track click set the value.
Common mistakes
Implementing drag-only interaction with no keyboard support.
Properties
State as interactive variants (Default/Hover/Focused/Disabled). Runtime value/min/max/step are React props — Figma has no numeric value property.
When should Progress Bar be used instead?
Use Progress Bar for read-only completion. Use Slider when the user must choose a value.
Does Beta Slider support a dual-thumb range?
No. The verified Figma set is a single thumb. Range selection is deferred.
Tokens used
semantic/border/defaultsemantic/action/primarysemantic/action/primary-hoversemantic/surface/defaultsemantic/focus-ringopacity/disabled
Known limitation
Beta is horizontal single-thumb only. Dual-thumb range and vertical orientation are not in the verified Figma set. Older Style (Success/Warning/Danger) docs text does not match the live component set.
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Accessible name via aria-labelledby. |
| value | number | — | Controlled numeric value. |
| defaultValue | number | 0 | Uncontrolled initial value. |
| onValueChange | (value: number) => void | — | Fires when the value changes. |
| min | number | 0 | Minimum value (aria-valuemin). |
| max | number | 100 | Maximum value (aria-valuemax). |
| step | number | 1 | Increment for keyboard and snapped pointer changes. |
| disabled | boolean | false | Prevents interaction and dims via opacity/disabled. |
React example
Copy React example
import { Slider } from "@/components/ui/Slider";
export function Example() {
return <Slider label="Volume" defaultValue={40} min={0} max={100} step={1} />;
}