Slider

Forms

A draggable control for picking a value from a range.

Sliders let users pick a value from a continuous (or stepped) range. Keyboard arrows, PageUp/PageDown, and Home/End all work out of the box.

npx shadcn@latest add slider

Basic usage

A controlled slider with a readout beneath it.

Preview

Live

Value: 50

tsx

1const [value, setValue] = useState(50)
2
3<Slider
4  value={value}
5  onValueChange={setValue}
6  min={0}
7  max={100}
8  step={1}
9/>

Use defaultValue for an uncontrolled slider.

Preview

Live

tsx

1<Slider defaultValue={30} min={0} max={100} className="w-64" />

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
value	number	The controlled value.
defaultValue	number	The uncontrolled initial value.
onValueChange	(value: number) => void	Called as the value changes.
min	number= 0	The minimum value.
max	number= 100	The maximum value.
step	number= 1	The increment between valid values.