Slider

Choose a bounded numeric value along a visual range.

<hui-slider>View source View spec

Interactive

Try it

value, min, max, step, orientation, disabled

Markup

State

Events

<hui-slider id="playground-slider" name="volume" min="0" max="100" step="5" value="40">
  <hui-slider-range></hui-slider-range>
  <hui-slider-thumb aria-label="Volume"></hui-slider-thumb>
</hui-slider>

data-state: Waiting for enhancement

No component events yet.

Usage

Use hui-slider when a user benefits from choosing a value along a bounded visual range. Use a number field when exact text entry is the primary task. This implementation supports one thumb; do not model multi-thumb ranges with duplicate slider roots.

Anatomy

Root and track: hui-slider
Thumb control: hui-slider-thumb with role="slider"
Optional fill: hui-slider-range
Form integration: visually hidden native input owned by the root

Examples

Fixture exampleSource-backed

<section aria-labelledby="slider-heading">
    <h2 id="slider-heading">Volume</h2>
    <form id="slider-form">
      <hui-slider id="volume-slider" name="volume" min="0" max="100" step="5" value="40" aria-labelledby="slider-heading">
        <hui-slider-range></hui-slider-range>
        <hui-slider-thumb><b>Volume</b></hui-slider-thumb>
      </hui-slider>
      <hui-slider id="vertical-slider" name="balance" min="0" max="100" step="5" value="40" orientation="vertical" aria-label="Balance">
        <hui-slider-range></hui-slider-range>
        <hui-slider-thumb></hui-slider-thumb>
      </hui-slider>
      <hui-slider id="disabled-slider" name="disabled-volume" min="0" max="100" step="5" value="40" disabled aria-label="Disabled volume">
        <hui-slider-range></hui-slider-range>
        <hui-slider-thumb></hui-slider-thumb>
      </hui-slider>
    </form>
  </section>

API reference

Attribute	Meaning
`value`	Normalized committed numeric value.
`min`, `max`, `step`	Numeric bounds and step grid; defaults are `0`, `100`, and `1`.
`large-step`	PageUp/PageDown multiplier.
`orientation`	`horizontal` (default) or `vertical`.
`dir`	Direction used for horizontal keyboard behavior.
`disabled`	Disables the thumb and native form value.
`name`, `form`, `required`	Hidden native form input metadata.
`aria-label`, `aria-labelledby`, `aria-describedby`	Accessible naming and description for the thumb.
`value-text`	Optional formatted accessible value.

The root emits hui-value-change with { value }. Arrow keys change by step, PageUp/PageDown use large-step, Home/End commit the bounds, and pointer dragging updates the value. The root exposes data-state="active", data-disabled, --hui-position-pct, and the thumb exposes data-state="dragging". Values are clamped, step-aligned, and serialized without trailing zeroes. SSR emits resolved slider ARIA attributes and a hidden form input; without JavaScript, the native input remains available while pointer and keyboard enhancement are unavailable.

States and styling

State	Contract and styling guidance
Default	Enabled thumb exposes the normalized value and remains in the tab order.
Hover	Use `--hui-color-interactive-hover` for thumb feedback.
Active	`data-state="dragging"` exposes pointer interaction; keep the interactive fill visible.
Focus	Keep a visible ring with `--hui-color-focus-ring` and `--hui-size-focus-ring`.
Disabled	Expose `aria-disabled`, remove the thumb from the tab order, and use disabled aliases.
Error	No built-in validation state; pair `aria-invalid="true"` with an associated message and `--hui-color-danger`.

State channel

Attributes are the source of truth. Style derived state with data-state, ARIA attributes, and the --hui-* token aliases.

Accessibility and keyboard support

The slider exposes a labelled slider control. Arrow keys change by step, Home and End commit the bounds, and the focus ring must remain visible.

SSR and forms

Slider preserves source-of-truth attributes and accessible state in server-rendered light-DOM markup. Use stable IDs when the component generates relationships; client enhancement adds interaction without changing the public contract.

Code

<form>
  <hui-slider id="volume" name="volume" min="0" max="100" step="5" value="40">
    <hui-slider-range></hui-slider-range>
    <hui-slider-thumb aria-label="Volume"></hui-slider-thumb>
  </hui-slider>
</form>

<hui-slider id="playground-slider" name="volume" min="0" max="100" step="5" value="40">
  <hui-slider-range></hui-slider-range>
  <hui-slider-thumb aria-label="Volume"></hui-slider-thumb>
</hui-slider>