◇

HueSlider

2 parts

A 1D slider for picking the hue (0–360°) of a colour. It works standalone — owning its own HSVA via v-model / defaultValue — or, when nested inside a ColorFieldRoot, reads and writes that shared colour so the whole picker cluster stays in sync. Mirrors the standard slider anatomy: the root owns the value, maps pointer drags along the track, handles arrow / Page / Home / End keys, and provides context to HueSliderTrack and HueSliderThumb. The gradient background should run through the full hue wheel; style it via the exposed slot/data-* hooks. Reach for it as the hue rail of a colour picker.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  HueSliderRoot,
  HueSliderThumb,
} from '@robonen/primitives/color/hue-slider';

<HueSliderRoot>
  <HueSliderThumb />
</HueSliderRoot>

API Reference

HueSliderRoot

Root

A 1D slider for picking the hue (`0–360°`) of a colour. It works standalone — owning its own `HSVA` via `v-model` / `defaultValue` — or, when nested inside a `ColorFieldRoot`, reads and writes that shared colour so the whole picker cluster stays in sync. Mirrors the standard slider anatomy: the root owns the value, maps pointer drags along the track, handles arrow / Page / Home / End keys, and provides context to `HueSliderTrack` and `HueSliderThumb`. The gradient background should run through the full hue wheel; style it via the exposed slot/`data-*` hooks. Reach for it as the hue rail of a colour picker.

Prop	Type	Default	Description
`defaultValue`?	`HSVA`	`{ h: 0, s: 1, v: 1, a: 1 }`	Uncontrolled initial colour.
`step`?	`number`	`1`	Keyboard step in degrees.
`largeStep`?	`number`	`10`	Large-step multiplier (Page keys / Shift+Arrow).
`orientation`?	`HueSliderOrientation`	`'horizontal'`	Orientation.
`dir`?	`HueSliderDirection`	—	Writing direction (inherited from `ConfigProvider` when omitted).
`disabled`?	`boolean`	`false`	Disable interaction.
`modelValue`?	`HSVA \| null`	—	Two-way bound value (`v-model`).

Emits

Event	Payload
`update:modelValue`	`[value: HSVA \| null]`

HueSliderThumb

Thumb

The draggable handle of a `HueSliderRoot`, rendered as `role="slider"` with full ARIA value attributes (`aria-valuemin="0"`, `aria-valuemax="360"`, `aria-valuenow` = current hue, `aria-valuetext` = `"<n>°"`). It positions itself along the track by the hue percentage and handles keyboard interaction (arrows step by `step`, Page Up/Down and Shift+Arrow by the large step, Home/End jump to `0°`/`360°`). Give it an `aria-label` or rely on the default `"Hue"`. Exposes `hue` and `percent` as slot props.

No props or events — renders its element and forwards attributes.