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.

When to use

• Adjusting one channel of a color by sight: hue, lightness, chroma, transparency.

Do

• Show the sliders of one color together, in the order people tune them.

When not to use

• A range with no color meaning: hy-slider.
• An exact channel value people type: pair the slider with a hy-number-input.
• Picking a whole color across all channels: hy-color-picker.

Accessibility: your part

• When several sliders stack, give each a distinct label.
• Keep the value readout; set hide-value only when a paired hy-number-input shows the same value.

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 (forwarded to the inner slider). Setting it raises error; clearing it lowers it.
warningMessage	warning-message	string	''	Warning message (forwarded to the inner slider): the value is accepted but worth a second look. Setting it raises warning; clearing it lowers it.
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).
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 (forwarded to the inner slider).
warning	warning	boolean	false	Warning state (forwarded to the inner slider): shows warning-message in the warning color; never sets aria-invalid. error wins when both are set.
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)
warning-message	The inner slider's warning message (re-exported)
message-icon	The icon starting the inner slider's error or warning message (re-exported)

Methods

focus()

Focuses the inner slider's range input.

blur()

Blurs the inner slider.