slider

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/slider/Slider.astro directly.
3/**
4 * @component Slider
5 * @title Slider
6 * @description An input component that allows users to select a value from a range by dragging a thumb along a track.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2523-6067&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <Slider class="w-full max-w-sm" defaultValue={50} max={100} />
12 *
13 * @usage
14 *
15 * ```astro nocollapse
16 * ---
17 * import { Slider } from '@bejamas/ui/components/slider';
18 * ---
19 *
20 * <Slider defaultValue={50} max={100} />
21 * ```
22 *
23 * @examples
24 *
25 * ### Range
26 *
27 * Use two thumbs to create a range slider for selecting a min and max value.
28 *
29 * <Slider class="w-full max-w-sm" defaultValue={[25, 75]} max={100} />
30 *
31 * ### Vertical
32 *
33 * Set orientation to vertical for a vertical slider.
34 *
35 * <div class="h-48">
36 *   <Slider class="h-full" orientation="vertical" defaultValue={50} max={100} />
37 * </div>
38 *
39 * ### Disabled
40 *
41 * Disable the slider to prevent interaction.
42 *
43 * <Slider class="w-full max-w-sm" defaultValue={50} max={100} disabled />
44 *
45 * ### Step
46 *
47 * Set a custom step increment.
48 *
49 * <Slider class="w-full max-w-sm" defaultValue={50} max={100} step={10} />
50 *
51 * @api
52 *
53 * ### Events
54 *
55 * The slider emits custom events that you can listen to:
56 *
57 * | Event | Detail | Description |
58 * |-------|--------|-------------|
59 * | `slider:change` | `{ value: number \| [number, number] }` | Fired on every value change (during drag) |
60 * | `slider:commit` | `{ value: number \| [number, number] }` | Fired when value is committed (pointer up or keyboard blur) |
61 *
62 * ```astro nocollapse
63 * <Slider id="my-slider" defaultValue={50} max={100} />
64 * ```
65 *
66 * ```js nocollapse
67 *   const slider = document.getElementById('my-slider');
68 *
69 *   slider.addEventListener('slider:change', (e) => {
70 *     console.log('Value changing:', e.detail.value);
71 *   });
72 *
73 *   slider.addEventListener('slider:commit', (e) => {
74 *     console.log('Value committed:', e.detail.value);
75 *   });
76 * ```
77 *
78 * ### Programmatic Control
79 *
80 * You can set the slider value programmatically by dispatching a `slider:set` event:
81 *
82 * ```js nocollapse
83 * // Set single value
84 * slider.dispatchEvent(new CustomEvent('slider:set', {
85 *   detail: { value: 75 }
86 * }));
87 *
88 * // Set range values
89 * slider.dispatchEvent(new CustomEvent('slider:set', {
90 *   detail: { value: [25, 75] }
91// … truncated