---
import { Slider } from "@/components/ui/slider"
---
<Slider defaultValue={33} max={100} step={1} class="w-full max-w-md" />Installation
npx shadcn@latest add @fulldev/sliderUsage
---
import { Slider } from "@/components/ui/slider"
---<Slider defaultValue={33} max={100} step={1} />Thumbs use thumbAlignment="edge" by default, so they stay within the track at
the minimum and maximum. Use thumbAlignment="center" to center them over the
track endpoints. A single value renders one thumb; a pair renders a range.
Examples
Range
Use an array with two values for a range slider.
---
import { Slider } from "@/components/ui/slider"
---
<Slider defaultValue={[25, 75]} max={100} step={1} class="w-full max-w-md" />Vertical
Use orientation="vertical" for a vertical slider.
---
import { Slider } from "@/components/ui/slider"
---
<div class="flex h-48 items-center">
<Slider
orientation="vertical"
defaultValue={60}
max={100}
step={5}
class="h-full"
/>
</div>Disabled
Use the disabled prop to disable the slider.
---
import { Slider } from "@/components/ui/slider"
---
<Slider defaultValue={50} disabled class="w-full max-w-md" />API Reference
See the GitHub source code for more information on props. See the data-slot docs for more information on interactivity.