Holo Slider
The <holo-slider> component is a form-associated custom element that wraps a native
<input type="range"> in its shadow root, styled to match the design system. Native range gets
keyboard arrow-key, Home/End, and touch-drag support for free. The current value is shown next to
the track and exposed via aria-valuetext.
Live Previews
Section titled “Live Previews”Default
Section titled “Default”<holo-slider label="Volume" min="0" max="100" value="50"></holo-slider>Stepped range
Section titled “Stepped range”<holo-slider label="Brightness" min="0" max="10" step="2" value="4"></holo-slider>Disabled
Section titled “Disabled”<holo-slider label="Volume" value="30" disabled></holo-slider>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------- | --------- | ----------- |
| label | label | The visible label text for the slider. | string | undefined |
| name | name | The form field name submitted with the owning form. | string | undefined |
| min | min | The minimum selectable value. | number | 0 |
| max | max | The maximum selectable value. | number | 100 |
| step | step | The increment between selectable values. | number | 1 |
| value | value | The current value of the slider. | number | 0 |
| disabled | disabled | If true, the slider is disabled and non-interactive. | boolean | false |
Events
Section titled “Events”| Event | Description | Type |
| ------------ | ----------------------------------------- | --------------------- |
| holoInput | Emitted on every drag/arrow-key movement. | CustomEvent<number> |
| holoChange | Emitted when the value is committed. | CustomEvent<number> |