Forms

Slider

Pick a number from a continuous range where the rough value matters more than the exact one.

Importimport { Slider } from "@/components/ui/Slider";
Sourcesrc/components/ui/Slider

For a value where the approximate position matters more than the exact number — opacity, a font weight, a blur radius. When the precise figure matters, give it an Input alongside, or instead.

Default

Built on a native rangeinput, so keyboard and pointer behaviour are the platform's. It reports through onValueChange with a number rather than an event.

value: 40

Range and step

The first is read-only here so the example holds its value.

Props

Slider

PropTypeDefaultDescription
valuenumberRequired. The controlled value.
onValueChange(value: number) => voidCalled with the new number, not an event.
minnumber0Lower bound.
maxnumber100Upper bound.
stepnumber1Increment.