Build · New

Slider

Pick a value or a range by dragging or with the keyboard, when the feel matters more than the exact number: volume, zoom, a price range.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/slider

Dependencies it brings: @base-ui/react, @phosphor-icons/react

import { Slider } from "@/components/ui/slider";

<Slider aria-label="Volume" defaultValue={40} />
<Slider aria-label="Price" min={0} max={1000} step={50} defaultValue={[200, 800]} />

xs to xl: a 16, 24, 40, 56 or 96px track.

handleStyle="circle", and showStops puts a dot at every step when only certain values are allowed.

Fills from the middle of the range toward the value, for values that go below or above zero.

Two values [from, to] with two handles, each named for screen readers.

Fills from the bottom in both directions; Up and Down move it.

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"xs"`	Figma's Size: XSmall to XLarge.
`handleStyle`	`"line" \| "circle"`	`"line"`	Figma's Handle style.
`showStops`	`boolean`	`false`	Figma's Show stops: a dot at every `step`. Without it, only the end of an empty track gets a dot.
`centered`	`boolean`	`false`	Figma's Centered slider: fills from the middle of the range.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Figma's Vertical slider.
`value / defaultValue`	`number \| [number, number]`		A number, or `[from, to]` for Figma's Range slider.
`min / max / step`	`number`	`0 / 100 / 1`	The value's bounds and step.
`largeStep`	`number`	`10`	The Page Up / Page Down step.
`onValueChange / onValueCommitted`	`(value) => void`		While dragging, and on release.
`showValue`	`boolean`	`true`	The value bubble while dragging or when focused from the keyboard.
`format`	`Intl.NumberFormatOptions`		How the value reads in the bubble and to screen readers (currency, percent).
`numerals`	`"latn" \| "arab"`		Numeral system; defaults to `KanzProvider`'s.
`disabled`	`boolean`	`false`	Figma's State = Disabled.
`aria-label`	`string`		The slider's name ("Volume").

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowRightArrowUp`	Increases by one step. In Arabic, ArrowLeft increases.
`ArrowLeftArrowDown`	Decreases by one step. In Arabic, ArrowRight decreases.
`PageUpPageDown`	Changes by `largeStep`.
`HomeEnd`	Jumps to the minimum or the maximum.

Each handle is role="slider" with aria-valuemin, aria-valuemax and aria-valuenow, and value text in the same format and numerals.
In a range, the handles are named "…, from" and "…, to".
For precise amounts like a transfer amount, use a field, or pair one with the slider.

Horizontal sliders fill from the right: the minimum sits on the right, and ArrowLeft increases.
Range and centered sliders mirror the same way.

Numerals: The value bubble and the screen reader text use the chosen numerals (0-9 or ٠-٩) and the language's formatting.
Arabic typography: label-14 Medium in the bubble.
Mixed-direction text: The value is isolated in the bubble, so a currency sign or minus stays in place.