Slider

Pick a value or a range by dragging or with the keyboard, with the value always readable.

Volume

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add slider

What add slider installs alongside the component. The CLI skips any you already have in a compatible version.

3 examples · 1 component

Volume

SliderLabel names the thumb; SliderValue shows and announces the value.

Price

$200 – $800

Two thumbs, each with its own name, formatted as currency.

Opacity

50%

Bass (unavailable)

step="25" snaps to quarters; disabled blocks interaction.

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`value / defaultValue` An array renders one thumb per value (a range).	`number \| number[]`	—
`onValueChange / onValueCommitted` While dragging, and once when released.	`(value) => void`	—
`min / max / step` Bounds and increment; Page Up/Down moves by largeStep.	`number`	`0 / 100 / 1`
`format / locale` How SliderValue and screen readers present the value (currency, percent…). locale defaults to en-US so SSR and the client agree.	`Intl.NumberFormatOptions / string`	`— / "en-US"`
`thumbLabels` One accessible name per thumb for ranges.	`string[]`	—
`orientation` Vertical sliders need a height (h-40 by default).	`"horizontal" \| "vertical"`	`"horizontal"`
`disabled` Dims the slider and blocks interaction.	`boolean`	`false`
`SliderLabel / SliderValue` Label wired to the thumbs, and the live formatted value.	`div / output`	—

The states that apply to this component and their visual treatment.

State	Treatment
Idle	Track in muted, filled part and thumb ring in primary.
Dragging	The value and output follow the pointer.
Focus	Offset outline on the focused thumb.
Range	Two thumbs; they cannot cross.
Disabled	Dimmed with a not-allowed cursor.

Each thumb is a native range input: arrows change by step, Page Up/Down by a larger step, Home/End jump to the bounds.

SliderLabel names a single thumb; ranges need thumbLabels so each thumb says which end it controls.

SliderValue is an <output> and format shapes both what is shown and what is announced ("$250", not "250").

The control is 24px tall and the whole track is clickable, so small thumbs stay easy to reach.