Slider
A component that allows users to select a value from a range.
Installation
$ npx shadcn@latest add "/r/slider.json"
Usage
Examples
Sizes
The slider comes in three sizes: small, medium, and large.
Min, Max, and Step
You can define the range and the increment value of the slider.
Disabled State
The slider can be disabled to prevent user interaction.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | The size of the slider. |
| defaultValue | number[] | - | The initial value of the slider. |
| value | number[] | - | The controlled value of the slider. |
| onValueChange | (value: number[]) => void | - | 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 step increment of the slider. |
| disabled | boolean | false | Whether the slider is disabled. |
| className | string | - | Additional CSS classes to apply to the slider. |