HyColorSlider

Usage examples on this page are written for Lit / plain HTML (<hy-color-slider>). The same component ships as HyColorSlider in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

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 (hue channel)

<hy-color-slider
type="h"
label="Hue"
hue="210"
chroma="0.12"
lightness="0.65"
></hy-color-slider>
<script>
const slider = document.querySelector('hy-color-slider');
// Controlled: echo the adjusted channel back onto the props.
slider.addEventListener('input', (e) => {
slider.hue = e.detail.h;
});
</script>

Tuner-style chroma multiplier (custom 0-1 range)

<hy-color-slider
  type="c"
  label="Chroma"
  hint="saturation"
  max="1"
  hue="210"
  chroma="0.5"
  lightness="0.65"
></hy-color-slider>

API

Properties

Property	Attribute	Type	Default	Description
type	type	'h' | 'c' | 'l'	'h'	Which OKLCH channel the gradient represents.
hue	hue	number	0	Current hue (0–360) — used to paint c and l gradients and in event detail.
chroma	chroma	number	0.1	Current chroma (absolute OKLCH chroma, typically 0–0.4) — used to paint h and l gradients.
lightness	lightness	number	0.7	Current lightness (0–1) — used to paint h and c gradients.
min	min	number | undefined	—	Minimum slider value. Defaults per type: h=0, c=0, l=0. Override to support arbitrary numeric scales (e.g. chroma multiplier 0–1).
max	max	number | undefined	—	Maximum slider value. Defaults per type: h=360, c=0.4, l=1. Override to support arbitrary numeric scales.
step	step	number | undefined	—	Step granularity. Defaults per type: h=1, c=0.01, l=0.01.
maxChromaGradient	max-chroma-gradient	number	0.4	Maximum chroma used when rendering the chroma gradient (the "saturated end" of type=c). Caps chroma within sRGB gamut. Slider values are governed by max independently.
label	label	string	''	Primary label. Defaults per type: "Hue", "Chroma", "Lightness".
hint	hint	string	''	Secondary hint text under the label.
helperText	helper-text	string	''	Helper text displayed below the slider.
errorMessage	error-message	string	''	Error message (auto-raises error state on the inner slider).
suffix	suffix	string	''	String appended to the value readout. Defaults per type: "°" for h, "" for c/l.
size	size	'small' | 'medium' | 'large'	'medium'	Size variant (forwarded to inner slider).
variant	variant	'default' | 'success' | 'warning' | 'danger'	'default'	Visual variant (forwarded to inner slider).
layout	layout	'block' | 'inline'	'block'	Row layout (forwarded to inner slider). block (default) stacks label above the slider; inline puts label+hint on the left, slider in the middle, value on the right. Set --hy-slider-label-column-width on a wrapping container so stacked sliders align.
disabled	disabled	boolean	false	Disabled state.
error	error	boolean	false	Error state.
hideValue	hide-value	boolean	false	Hide the numeric value readout.
displayPrecision	display-precision	number | undefined	—	Decimal places shown in the value readout. Forwarded to hy-slider — auto-inferred from step when unset (e.g. step=0.01 → 2 decimals).
formatValue	—	(value: number) => string | undefined	—	Custom formatter for the value readout. Forwarded to hy-slider — when set, owns the full display string (suffix is not appended).
name	name	string	''	Form field name (forwarded to inner slider).
inputId	input-id	string	''	Explicit input ID (forwarded to inner slider).
value	—	number	—	Current channel value, derived from hue/chroma/lightness.

Events

Event	Detail	Description
input	—	Fires during drag / keyboard adjustment. Detail: ColorSliderEventDetail.
change	—	Fires when the value is committed. Detail: ColorSliderEventDetail.

CSS Parts

Part	Description
base	The inner slider's base wrapper (re-exported)
label	The inner slider's label (re-exported)
row	The inner slider's row (re-exported)
input	The inner slider's native range input (re-exported)
track	The inner slider's track (re-exported)
fill	The inner slider's progress fill (re-exported; hidden by default)
thumb	The inner slider's thumb (re-exported)
value	The inner slider's numeric readout (re-exported)
helper-text	The inner slider's helper text (re-exported)
error-message	The inner slider's error message (re-exported)

Methods

focus()

Focuses the inner slider's range input.

blur()

Blurs the inner slider.