Slider
Pick a value or a range on a track that follows your finger.
pnpm dlx shadcn@latest add @uiarc/sliderLive · keyboard ready
- Approximate values like volume, opacity, or a price range.
- Ranges with two thumbs, labelled marks, and a formatted readout.
- Use number-field when the exact number matters.
- Use progress to show a value people cannot change.
Installation
Add Slider with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/sliderAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Slider } from "@/registry/components/slider/slider"; export function PriceFilter() { const [range, setRange] = useState<[number, number]>([20, 80]); return ( <Slider label="Price" value={range} onValueChange={setRange} step={5} format={(v) => `$${v}`} thumbLabels={["Minimum price", "Maximum price"]} /> );}Slider
A single or range slider with momentum dragging, marks, a value bubble, and a rolling readout.
PropTypeDefaultDescription
labelRequiredstring–Visible label; names the thumbs unless thumbLabels is set.valuenumber | [number, number]–Controlled value. A pair renders a range with two thumbs.defaultValuenumber | [number, number]–Initial value when uncontrolled.onValueChange(value: T) => void–Called on every step while dragging or pressing keys.onValueCommit(value: T) => void–Called once when a drag is released or a key changes the value.minnumber0Lower bound.maxnumber100Upper bound.stepnumber1Increment.largeStepnumbera tenth of the rangeDistance for PageUp, PageDown, and Shift with an arrow.marks(number | { value: number; label?: string })[]–Ticks on the track; labelled marks print under it and are clickable.minStepsBetweenThumbsnumber0Closest two range thumbs may sit, in steps.format(value: number) => string–Formats the readout, bubble, and spoken value.showValuebooleantrueShow the readout beside the label.thumbLabels[string, string]–Accessible names for the two range thumbs.startReactNode–Content before the track, such as an icon.endReactNode–Content after the track.namestring–Submits the value with a form, one hidden input per thumb.disabledboolean–Disables dragging and keys.classNamestring–Added to the root.- ArrowRightorArrowUp
- Increases by step.
- ArrowLeftorArrowDown
- Decreases by step.
- Shift+ArroworPageUporPageDown
- Moves by largeStep.
- HomeorEnd
- Moves to the lowest or highest allowed value for that thumb.
- Each thumb is role="slider" with aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext from format, and aria-orientation.
- Thumbs are named by label, or by thumbLabels for ranges.
- The readout, bubble, and marks are aria-hidden because the thumbs carry the value.
- Released drags carry a little momentum before snapping; the bubble springs up over an active thumb and digits roll in the readout. At a limit the thumb strains toward the key press and springs back.
- Reduced motion removes momentum, the strain, and digit rolling, and turns off CSS transitions.
- It fills its column; the track uses touch-action pan-y, so horizontal drags move the thumb while vertical swipes scroll the page.
- On coarse pointers the value bubble sits higher so the finger does not cover it.
- The bubble and end mark labels clamp inside the track so they never overflow the edges.
- Drags write motion values with pointer capture, so the thumb follows 1:1 without React re-renders per frame.
- onValueChange fires on every step; put fetching or heavy work in onValueCommit.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for approximate values and ranges like volume, price filters, or opacity. Use number-field when the exact number matters.
- Controlled or uncontrolled; pass a tuple for a range. Put heavy work such as fetching in onValueCommit, not onValueChange.
- Pass name to submit through hidden inputs. Exported as both named and default.
The full library index for assistants is at /llms.txt.