Loading...
Loading...
The Slider component allows users to select a value or range of values by dragging a handle along a track. Perfect for numeric inputs, filters, and volume controls.
Value: 50
Range: 20 - 80
$20 - $80
import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from '@/components/ui/slider';
// Basic slider
const [value, setValue] = useState([50]);
<SliderRoot value={value} onValueChange={({ value }) => setValue(value)} min={0} max={100}>
<SliderTrack>
<SliderRange />
</SliderTrack>
<SliderThumb />
</SliderRoot>
// Range slider
const [range, setRange] = useState([20, 80]);
<SliderRoot value={range} onValueChange={({ value }) => setRange(value)} min={0} max={100}>
<SliderTrack>
<SliderRange />
</SliderTrack>
<SliderThumb index={0} />
<SliderThumb index={1} />
</SliderRoot>
// With custom step
<SliderRoot defaultValue={[50]} min={0} max={100} step={10}>
<SliderTrack>
<SliderRange />
</SliderTrack>
<SliderThumb />
</SliderRoot>