Slider | Bearnie

Installation

npx bearnie add slider

import Slider from "@/components/ui/slider/Slider.astro";

Usage

import { Slider } from "@/components/ui"

<Slider defaultValue={[33]} max={100} step={1} />

Examples

Range

Multiple thumbs

Step values

Vertical

Disabled

With label

Volume50%

<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