Slider
FormsA slider input for selecting a value from a range. Use sliders for continuous values like volume, brightness, or progress.
Import
import { Slider } from "@/components/ui/slider";Usage
Basic Slider
Standard range slider
50
Custom Range
Slider with custom min/max values
500
Percentage
Slider showing percentage value
75
Disabled
Slider in disabled state
30
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text displayed above the slider |
value | number | — | Controlled value of the slider |
defaultValue | number | 0 | Default value (uncontrolled) |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step increment |
showValue | boolean | false | Whether to display the current value |
onValueChange | (value: number) => void | — | Handler called when value changes |
disabled | boolean | false | Whether the slider is disabled |