Slider

---
import { Slider } from '@bejamas/registry/ui/slider';
---

<Slider class="w-full max-w-sm" defaultValue={50} max={100} />

Installation

bun

bunx bejamas add slider

npm

npx bejamas add slider

pnpm

pnpm dlx bejamas add slider

yarn

yarn dlx bejamas add slider

Usage

---
import { Slider } from '@bejamas/ui/components/slider';
---

<Slider defaultValue={50} max={100} />

Props

Prop	Type	Default
class	string	""
value	SliderValue
defaultValue	SliderValue
min	number	0
max	number	100
step	number	1
orientation	"horizontal" | "vertical"	"horizontal"
disabled	boolean	false

Examples

Range

Use two thumbs to create a range slider for selecting a min and max value.

---
import { Slider } from '@bejamas/registry/ui/slider';
---

<Slider class="w-full max-w-sm" defaultValue={[25, 75]} max={100} />

Vertical

Set orientation to vertical for a vertical slider.

---
import { Slider } from '@bejamas/registry/ui/slider';
---

<div class="h-48">
  <Slider class="h-full" orientation="vertical" defaultValue={50} max={100} />
</div>

Disabled

Disable the slider to prevent interaction.

---
import { Slider } from '@bejamas/registry/ui/slider';
---

<Slider class="w-full max-w-sm" defaultValue={50} max={100} disabled />

Step

Set a custom step increment.

---
import { Slider } from '@bejamas/registry/ui/slider';
---

<Slider class="w-full max-w-sm" defaultValue={50} max={100} step={10} />

API Reference

Events

The slider emits custom events that you can listen to:

Event	Detail	Description
slider:change	{ value: number | [number, number] }	Fired on every value change (during drag)
slider:commit	{ value: number | [number, number] }	Fired when value is committed (pointer up or keyboard blur)

<Slider id="my-slider" defaultValue={50} max={100} />

  const slider = document.getElementById('my-slider');

  slider.addEventListener('slider:change', (e) => {
    console.log('Value changing:', e.detail.value);
  });

  slider.addEventListener('slider:commit', (e) => {
    console.log('Value committed:', e.detail.value);
  });

Programmatic Control

You can set the slider value programmatically by dispatching a slider:set event:

// Set single value
slider.dispatchEvent(new CustomEvent('slider:set', {
  detail: { value: 75 }
}));

// Set range values
slider.dispatchEvent(new CustomEvent('slider:set', {
  detail: { value: [25, 75] }
}));

Data Attributes

The slider sets these data attributes that you can use for styling or querying state:

Attribute	Element	Description
data-orientation	slider	Current orientation (horizontal or vertical)
data-disabled	slider	Present when slider is disabled
data-dragging	slider, thumb	Present during drag interaction
data-value	slider	Current value(s) as string (e.g., "50" or "25,75")