import { Slider } from "@/components/ui/slider";
export function SliderDemo() {
return <Slider defaultValue={25} className="w-full max-w-xs" />;
}Installation
npx shadcn@latest add @eo-n/sliderUsage
Import all parts and piece them together.
import { Slider } from "@/components/ui/slider";<Slider />Examples
Disabled
import { Slider } from "@/components/ui/slider";
export function SliderDisabled() {
return <Slider defaultValue={25} className="w-full max-w-xs" disabled />;
}With Value
import { Slider, SliderValue } from "@/components/ui/slider";
export function SliderWithValue() {
return (
<Slider defaultValue={32} className="w-full max-w-xs">
<SliderValue />
</Slider>
);
}Vertical Orientation
import { Slider } from "@/components/ui/slider";
export function SliderVertical() {
return (
<Slider
defaultValue={25}
className="h-full max-h-[260px]"
orientation="vertical"
/>
);
}Range Slider
import { Slider } from "@/components/ui/slider";
export function SliderRange() {
return <Slider defaultValue={[25, 75]} className="w-full max-w-xs" />;
}