Copy to clipboard
<Slider defaultValue={[33]} max={100} step={1} />
<Slider defaultValue={[33]} max={100} step={1} /><Slider defaultValue={[33]} max={100} step={1} />
Installation
Copy to clipboard
npx bearnie add slider
npx bearnie add slidernpx bearnie add slider
bunx bearnie add slider
bunx bearnie add sliderbunx bearnie add slider
pnpm dlx bearnie add slider
pnpm dlx bearnie add sliderpnpm dlx bearnie add slider
yarn dlx bearnie add slider
yarn dlx bearnie add slideryarn dlx bearnie add slider
Usage
import { Slider } from "@/components/bearnie/slider"<Slider defaultValue={[33]} max={100} step={1} />Examples
Range
Copy to clipboard
<Slider defaultValue={[25, 75]} max={100} step={1} />
<Slider defaultValue={[25, 75]} max={100} step={1} /><Slider defaultValue={[25, 75]} max={100} step={1} />
Multiple thumbs
Copy to clipboard
<Slider defaultValue={[10, 50, 90]} max={100} step={1} />
<Slider defaultValue={[10, 50, 90]} max={100} step={1} /><Slider defaultValue={[10, 50, 90]} max={100} step={1} />
Step values
Copy to clipboard
<Slider defaultValue={[50]} max={100} step={10} />
<Slider defaultValue={[50]} max={100} step={10} /><Slider defaultValue={[50]} max={100} step={10} />
Vertical
Copy to clipboard
<Slider defaultValue={[50]} orientation="vertical" />
<Slider defaultValue={[50]} orientation="vertical" /><Slider defaultValue={[50]} orientation="vertical" />
Disabled
Copy to clipboard
<Slider defaultValue={[50]} disabled />
<Slider defaultValue={[50]} disabled /><Slider defaultValue={[50]} disabled />
With label
Copy to clipboard
50%
<div class="space-y-2">
<div class="flex justify-between">
<label class="text-sm font-medium">Volume</label>
<span class="text-sm text-muted-foreground">50%</span>
</div>
<Slider defaultValue={[50]} />
</div>
<div class="space-y-2">
<div class="flex justify-between">
<label class="text-sm font-medium">Volume</label>
<span class="text-sm text-muted-foreground">50%</span>
</div>
<Slider defaultValue={[50]} />
</div><div class="space-y-2">
<div class="flex justify-between">
<label class="text-sm font-medium">Volume</label>
<span class="text-sm text-muted-foreground">50%</span>
</div>
<Slider defaultValue={[50]} />
</div>
Anatomy
Slider- The main slider container with track, range, and thumb(s)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | number[] | [0] | Initial value(s). Use array with multiple values for range slider |
| min | number | 0 | Minimum value |
| max | number | 100 | Maximum value |
| step | number | 1 | Step increment |
| disabled | boolean | false | Disables the slider |
| orientation | “horizontal” | “vertical” | “horizontal” | Slider orientation |
| name | string | - | Form input name |
| class | string | - | Additional CSS classes |