Slider

The custom element is <hui-slider>.

Overview

A form-associated range slider built on native range inputs, so the keyboard behaviour and accessibility semantics come from the platform. In range mode a second input submits one joined low,high value under a single name.

Example

Slider

Source

<hui-slider name="volume" value="50" aria-label="Volume"></hui-slider>

The Go template that renders it:

<hui-slider name="volume" min="0" max="100" value="{{ .Volume }}" aria-label="Volume"></hui-slider>

API

Attributes9

Attributes

Name	Type	Default	Description
name	string	''	The form field name. With no name the control contributes no entry to FormData.
disabled	boolean	false	Disables both range inputs and clears the form value.
min	number	0	Lowest value on the track. Reflected.
max	number	100	Highest value on the track. Reflected.
step	number	1	Step between values. Reflected.
value	string	'0'	The current value. Not reflected; the attribute only seeds the reset value.
value-high	string	'100'	The upper thumb in range mode. Not reflected; the property is valueHigh.
range	boolean	false	Renders two thumbs and submits the joined value. Reflected.
required	boolean	false	Reflected; marks the control required for constraint validation.

Properties9

Properties

Name	Type	Default	Description
name	string	''	Reflects to the name attribute.
disabled	boolean	false	Reflects to the disabled attribute.
min	number	0	Reflects to the min attribute.
max	number	100	Reflects to the max attribute.
step	number	1	Reflects to the step attribute.
value	string	'0'	The lower or single value. Not reflected.
valueHigh	string	'100'	The upper value in range mode. Not reflected; bound to value-high.
range	boolean	false	Reflects to the range attribute.
required	boolean	false	Reflects to the required attribute.

Events2

Events

Name	Description
input	Emitted from the host while a thumb is dragged or stepped, after the value updates. bubbles and composed; no detail.
change	Emitted from the host when the native change fires, typically on release. bubbles and composed; no detail.

CSS custom properties4

CSS custom properties

Name	Default	Description
--hui-primary	oklch(0.496 0.265 301.924)	Filled span.
--hui-input	oklch(0.62 0.019 323.02)	Unfilled rail.
--hui-ring	oklch(0.62 0.019 323.02)	The thumb's 1px edge, and its halo on hover and focus at half strength. The thumb itself is white in both themes, as nova's is.
--hui-focus-ring-width	3px	Width of the thumb halo.

::part() hooks3

::part() hooks

Name	Description
track	The 4px rail, centred in the host's 12px box. It draws the rail and the filled span through its ::before and ::after pseudo-elements.
control	The native range input, transparent: it carries the keyboard, the pointer and the value, and overhangs the rail by half its thumb at each end so its thumb travels the full rail. In range mode the lower input also exposes low and the upper high.
thumb	The drawn 12px thumb, centred on the value. In range mode the lower thumb also exposes low and the upper high.

States

Range

range adds a second thumb: value is the low end and value-high the high one, both submitted under the same name.

Range

Source

<hui-slider name="price" range value="20" value-high="80" aria-label="Price"></hui-slider>

Disabled

Disabled: the thumb cannot be dragged or moved by keyboard, and the value is still shown.

Disabled

Source

<hui-slider name="volume" value="30" disabled aria-label="Volume"></hui-slider>

Server-side mechanics

The server owns name, min, max, step, range, required, disabled and the seed value (plus value-high in range mode). It submits the single value, or the joined low,high pair, under name through ElementInternals. Because value and value-high are not reflected, a swap must re-send those attributes to restore the thumbs, and a swap mid-drag loses the drag and snaps back to the server's value. Server-rendered validation is required plus aria-invalid="true" or a hui-field invalid wrapper.

Accessibility

• The native range input supplies the slider role, value text and keyboard behaviour; the host is only the form-associated wrapper.
• In range mode the lower input is named by the host aria-label and the upper input is labelled Maximum.
• A single slider's whole input takes the pointer, so a press on the rail jumps there. In range mode only the thumbs do, so the two overlaid inputs do not swallow each other's drags.
• An invalid or disabled state leaves the platform semantics intact; focus is drawn on the thumb rather than the input box.

Keyboard

Keyboard

Keys	Action
Arrow keys	Step the focused thumb up or down; Left and Down decrease, Right and Up increase.
Page Up, Page Down	Move the thumb by a larger step, as the native range input does.
Home, End	Jump to the minimum and maximum.
Tab	Moves between the two inputs in range mode, which are separate controls.

Gotchas

• value and value-high are not reflected and are strings, while min, max and step are numbers.