◇

AlphaSlider

2 parts

A 1D slider for picking the alpha (opacity, 0–1) 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 AlphaSliderThumb. The background should be a checkerboard overlaid with an opaque→transparent colour gradient; style it via the exposed slot/data-* hooks. Reach for it as the opacity 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 {
  AlphaSliderRoot,
  AlphaSliderThumb,
} from '@robonen/primitives/color/alpha-slider';

<AlphaSliderRoot>
  <AlphaSliderThumb />
</AlphaSliderRoot>

API Reference

AlphaSliderRoot

Root

A 1D slider for picking the alpha (opacity, `0–1`) 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 `AlphaSliderThumb`. The background should be a checkerboard overlaid with an opaque→transparent colour gradient; style it via the exposed slot/`data-*` hooks. Reach for it as the opacity rail of a colour picker.

Prop	Type	Default	Description
`defaultValue`?	`HSVA`	`{ h: 0, s: 1, v: 1, a: 1 }`	Uncontrolled initial colour.
`step`?	`number`	`0.01`	Keyboard step in alpha units.
`largeStep`?	`number`	`10`	Large-step multiplier (Page keys / Shift+Arrow).
`orientation`?	`AlphaSliderOrientation`	`'horizontal'`	Orientation.
`dir`?	`AlphaSliderDirection`	—	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]`

AlphaSliderThumb

Thumb

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

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