An input that allows users to select a value or range from a given range.
Basic slider with a single thumb.
import { Slider } from "@/components/ui/slider"
export function SliderDemo() {
return <Slider defaultValue={[33]} max={100} step={1} />
}| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | number[] | - | The initial value of the slider. |
| value | number[] | - | The controlled value of the slider. |
| onValueChange | function | - | Event handler called when the value changes. |
| min | number | 0 | The minimum value of the slider. |
| max | number | 100 | The maximum value of the slider. |
| step | number | 1 | The stepping interval. |
| orientation | horizontal | vertical | horizontal | The orientation of the slider. |