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
label—stringLabel text displayed above the slider
value—numberControlled value of the slider
defaultValue0numberDefault value (uncontrolled)
min0numberMinimum value
max100numberMaximum value
step1numberStep increment
showValuefalsebooleanWhether to display the current value
onValueChange—(value: number) => voidHandler called when value changes
disabledfalsebooleanWhether the slider is disabled
| 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 |