HyColorSlider

A numeric slider whose track is painted with an OKLCH gradient for the selected channel (hue, chroma, or lightness). Wraps hy-slider and feeds it a gradient overlay via the track slot.

Two use cases

1. Color picker — three instances (h, c, l) sharing state. The caller owns hue, chroma, lightness and updates them from the event detail on each input.
2. Numeric dial with color context — a single slider whose value is not directly an OKLCH coordinate (e.g. a chroma multiplier on 0–1, or a vibrancy multiplier on 0–2). Override min / max / step independently of the channel; the gradient stays in the OKLCH-valid range and provides visual context even though the slider value runs past gamut.

Controlled only

The component never mutates its own hue/chroma/lightness. Parents must listen to input (live) or change (on commit) and update the props to reflect the new state.

Examples

OKLCH color picker

Tuner-style chroma multiplier (0-1)

Events

• input - Fires during drag / keyboard adjustment. Detail: ColorSliderEventDetail.
• change - Fires when the value is committed. Detail: ColorSliderEventDetail.

Methods

focus()

Focuses the inner slider's range input.

blur()

Blurs the inner slider.