Slider

An input component that allows users to select a value from a range by dragging a thumb along a track.

1
---
2
import { Slider, SliderRange, SliderThumb, SliderTrack } from '@bejamas/ui/components/slider';
3
---
4

5
<Slider class="w-full max-w-sm" defaultValue={[50]} max={100}>
6
  <SliderTrack>
7
    <SliderRange />
8
  </SliderTrack>
9
  <SliderThumb />
10
</Slider>

Installation

bunx bejamas add slider

npx bejamas add slider

pnpm dlx bejamas add slider

yarn dlx bejamas add slider

Usage

1
---
2
import { Slider, SliderTrack, SliderRange, SliderThumb } from '@bejamas/ui/components/slider';
3
---
4

5
<Slider defaultValue={[50]} max={100}>
6
  <SliderTrack>
7
    <SliderRange />
8
  </SliderTrack>
9
  <SliderThumb />
10
</Slider>

Examples

Range

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

1
---
2
import { Slider, SliderRange, SliderThumb, SliderTrack } from '@bejamas/ui/components/slider';
3
---
4

5
<Slider class="w-full max-w-sm" defaultValue={[25, 75]} max={100}>
6
  <SliderTrack>
7
    <SliderRange />
8
  </SliderTrack>
9
  <SliderThumb />
10
  <SliderThumb />
11
</Slider>

Vertical

Set orientation to vertical for a vertical slider.

1
---
2
import { Slider, SliderRange, SliderThumb, SliderTrack } from '@bejamas/ui/components/slider';
3
---
4

5
<div class="h-48">
6
  <Slider class="h-full" orientation="vertical" defaultValue={[50]} max={100}>
7
    <SliderTrack>
8
      <SliderRange />
9
    </SliderTrack>
10
    <SliderThumb />
11
  </Slider>
12
</div>

Disabled

Disable the slider to prevent interaction.

1
---
2
import { Slider, SliderRange, SliderThumb, SliderTrack } from '@bejamas/ui/components/slider';
3
---
4

5
<Slider class="w-full max-w-sm" defaultValue={[50]} max={100} disabled>
6
  <SliderTrack>
7
    <SliderRange />
8
  </SliderTrack>
9
  <SliderThumb />
10
</Slider>

Step

Set a custom step increment.

1
---
2
import { Slider, SliderRange, SliderThumb, SliderTrack } from '@bejamas/ui/components/slider';
3
---
4

5
<Slider class="w-full max-w-sm" defaultValue={[50]} max={100} step={10}>
6
  <SliderTrack>
7
    <SliderRange />
8
  </SliderTrack>
9
  <SliderThumb />
10
</Slider>

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)

1
<Slider id="my-slider" defaultValue={[50]} max={100}>
2
  <SliderTrack>
3
    <SliderRange />
4
  </SliderTrack>
5
  <SliderThumb />
6
</Slider>
7

8
<script>
9
  const slider = document.getElementById('my-slider');
10

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

15
  slider.addEventListener('slider:commit', (e) => {
16
    console.log('Value committed:', e.detail.value);
17
  });
18
</script>

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"`)