DocsSlider
Slider
An input where the user selects a value from within a given range.
Preview
Default (50)
Range (25 – 75)
Disabled
Installation
npx shadcn@latest add sliderUsage
import { Slider } from "@/components/ui/slider"
<Slider defaultValue={[50]} max={100} step={1} />Props
defaultValue — initial value(s) as an array
value — controlled value(s)
onValueChange — callback fired during drag
min / max — range boundaries
step — increment size
disabled — disables the slider
On This Page