---
import { Slider } from "@/components/ui/slider"
---
<Slider
defaultValue={33}
max={100}
step={1}
thumbAlignment="edge"
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} />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}
thumbAlignment="edge"
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}
thumbAlignment="edge"
class="h-full"
/>
</div>Disabled
Use the disabled prop to disable the slider.
---
import { Slider } from "@/components/ui/slider"
---
<Slider
defaultValue={50}
disabled
thumbAlignment="edge"
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.