Getting Started
Foundations
Components
Slider
A slider component for selecting values within a range. Supports single value, range selection, and step increments.
#Installation
npx @dinachi/cli@latest add slider#Usage
tsx
import { Slider, SliderControl, SliderTrack, SliderRange, SliderThumb, SliderValue } from '@/components/ui/slider'#Examples
Default Slider
A basic slider for value selection
Slider with Value Display
Controlled slider showing current value
50%
Range Slider
Slider with two thumbs for selecting a range
$25 - $75
Step Slider
Slider with defined step increments
50%
0%25%50%75%100%
Disabled Slider
Slider in disabled state
#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number[] | — | The controlled value of the slider |
| defaultValue | number[] | — | The default value when uncontrolled |
| onValueChange | (value: number[]) => void | — | Callback fired when the slider value changes |
| min | number | 0 | The minimum allowed value |
| max | number | 100 | The maximum allowed value |
| step | number | 1 | The step increment between values |
| disabled | boolean | false | Whether the slider is disabled |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the slider |