Slider
A control for selecting a value from a range by dragging a thumb.
'use client';
import { Slider } from '@/components/ui/slider';
export function SliderDefault() {
return <Slider defaultValue={50} className='w-full max-w-xs' />;
}
Installation
Usage
import { Slider, SliderValue } from "@/components/ui/slider"<Slider defaultValue={50} />Examples
With Value
'use client';
import { Slider } from '@/components/ui/slider';
export function SliderWithValue() {
return (
<Slider
defaultValue={[75]}
max={100}
step={1}
className='mx-auto w-full max-w-xs'
/>
);
}