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.
When to use
Section titled “When to use”Use it for:
- Choosing a number within a known range where approximate values are fine: volume, brightness, a price range.
- Values the user wants to see change live.
Don’t use it for:
- Exact numeric entry. Use Text Field with
type="number". - Choosing from named options. Use Radio or Select.
- Showing read-only progress. Use Progress.
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>Accessibility
Section titled “Accessibility”The component renders a native <input type="range"> with min, max, step and disabled, so the slider role, value and keyboard handling come from the browser. A <label> is linked to it and the current value is shown in an <output>. The component sets aria-valuetext to the plain number. It is form-associated through ElementInternals.
| Key | Action |
|---|---|
Tab |
Moves focus to or from the slider |
ArrowRight, ArrowUp |
Increases the value by one step |
ArrowLeft, ArrowDown |
Decreases the value by one step |
Home |
Sets the minimum |
End |
Sets the maximum |
PageUp, PageDown |
Larger increase or decrease (browser dependent) |
- Key behaviour is native to
<input type="range">. - A visible ring appears around the thumb with
:focus-visible. - The track uses
border-controlso its boundary meets 3:1 against the surface.
You provide:
- A
label. Without it the slider has no accessible name. - Units in the label (for example “Volume (%)”), because
aria-valuetextis only the number. - A text-field alternative where precise input matters. Dragging is hard for some users, though keyboard control is always available.
API Reference
Section titled “API Reference”Importing
import '@philbob-sideprojects/hololink-ui/holo-slider';Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
disabled | disabled | boolean | false | If true, the slider is disabled and non-interactive. |
label | label | string | — | The visible label text for the slider. |
max | max | number | 100 | The maximum selectable value. |
min | min | number | 0 | The minimum selectable value. |
name | name | string | — | The form field name submitted with the owning form. |
step | step | number | 1 | The increment between selectable values. |
value | value | number | 0 | The current value of the slider. |
Events
| Event | Detail | Description |
|---|---|---|
holoChange | number | Emitted when the value is committed (on change) with the current value. |
holoInput | number | Emitted on every drag/arrow-key movement with the current value. |
CSS custom properties
| Property | Description |
|---|---|
--holo-slider-focus-ring | Focus ring color around the thumb. |
--holo-slider-label-color | Text color of the label. |
--holo-slider-label-gap | Space between the label and the track. |
--holo-slider-thumb-bg | Color of the thumb. |
--holo-slider-thumb-size | Width and height of the thumb. |
--holo-slider-track-bg | Background color of the track. |
--holo-slider-track-height | Height of the track. |
--holo-slider-value-color | Text color of the displayed value. |