Forms & input
Slider
Pick a value — or a span of values — by direct manipulation. Drag the thumb, click anywhere on the track to jump, or nudge with the arrow keys. A live fill and a value bubble keep the current setting legible.
npx shadcn@latest add @orbit/sliderPlayground
Anatomy
A 6px neutral track holds the full min→max range; a brand-colored fill shows how far the value has travelled; an 18px thumb marks the exact point and surfaces a value bubble while it moves.
Variants
One value, a span between two thumbs, or a snap-to-notch stepped scale with a labelled axis. Set with the variant prop.
Examples
Sliders stack cleanly in settings panels and filter sidebars — each row pairs a label with a live readout, so a glance covers every value.
Value bubble
A bubble with the exact formatted value surfaces above the active thumb while it is dragged or keyboard-focused, then fades out. Format it with the unit and decimals props.
States
The thumb grows a soft focus ring when active or keyboard-focused, and the whole control dims and locks when disabled.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "single" | "range" | "stepped" | "single" | One thumb, two thumbs with a fill between, or a single thumb that snaps to visible tick marks with a labelled axis. |
| label | string | "Value" | Label in the header row; also names the thumbs for assistive tech. |
| showHeader | boolean | true | Show the label + live readout row above the track. |
| min | number | 0 | Minimum allowed value. |
| max | number | 100 | Maximum allowed value. |
| step | number | 1 | Granularity — values snap to multiples of the step. |
| unit | string | "" | Suffix appended to formatted values, e.g. "%" or "k". |
| decimals | number | 0 | Decimal places in the readout and bubble; 0 rounds to integers. |
| value | number | [number, number] | — | Controlled value. Use a [lo, hi] pair for range. |
| defaultValue | number | [number, number] | — | Uncontrolled initial value. Defaults to the midpoint (single/stepped) or the 25–70% span (range). |
| onValueChange | (value) => void | — | Fires on every change while dragging or nudging. |
| onValueCommitted | (value) => void | — | Fires once when a drag or key interaction settles. |
| scale | number[] | [min, mid, max] | Axis labels under a stepped slider. |
| disabled | boolean | false | Dims the control and blocks pointer and keyboard input. |
| name | string | — | Form field name, submitted via the hidden range input. |
| …rest | HTMLAttributes | — | Everything else is forwarded to the root <div>, including ref. |
Usage
Use for approximate values
Volume, opacity, a price band — where “about here” is the point and fine precision is not required.
Use for exact, sparse choices
For 3–4 discrete options a segmented control or radios are faster and clearer than a stepped slider.
Always show the value
A live readout or bubble turns a vague position into a concrete, trustworthy number.
Hide it on tiny ranges
A slider needs travel. For a 0–3 range a number stepper gives bigger, surer hit targets.
Keyboard & accessibility
Each thumb renders a native range input with role slider plus aria value, min and max. Tab focuses thumbs in order and shows the ring. Arrow keys nudge by one step (Shift+Arrow and PageUp/PageDown by a larger step); Home and End jump to the ends. The fill and thumb clear 3:1 against the track and surface.