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

tsx

import { Slider, SliderLabel, SliderControl, SliderTrack, SliderRange, SliderThumb, SliderValue } from '@/components/ui/slider'

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