hp-slider

Single-thumb continuous-value slider. Track + hex thumb; arrow keys step by step (PageUp / PageDown step by 10×; Home / End jump to min / max), drag the thumb with the pointer. role="slider", aria-valuenow / min / max reflect state.

Examples

API

Intent

Changelog

<body> <hp-slider min="0" max="100" step="1" value="30"></hp-slider> <hp-slider value="65"></hp-slider> document .querySelector("hp-slider") .addEventListener("change", (ev) => { console.log(ev.detail.value); }); </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`min`	`min`	`number`	`0`	Lower bound (default 0).
`max`	`max`	`number`	`100`	Upper bound (default 100).
`step`	`step`	`number`	`1`	Step size for arrow keys / pointer drag (default 1).
`value`	`value`	`number`	`0`	Current value. Clamped to [min, max] on set.
`disabled`	`disabled`	`boolean`	`false`	Disabled — no input, removed from tab order.
`name`	`name`	`string \| undefined`	—	Optional form name (placeholder for hp-form).

Events

Event	Type	Description
`change`	`CustomEvent`	When the value changes (keyboard or pointer). detail: { value }

CSS Parts

Part	Description
`slider`	The slider container
`track`	The track that the fill sits on
`fill`	The progress fill (left edge → thumb)
`thumb`	The hex thumb

Accessibility

Full keyboard support: Arrow keys (±step), PageUp / PageDown (±10× step), Home / End (min / max). aria-valuenow updates on every change so screen readers announce the new value.

No per-component entries in CHANGELOG.md yet.

Install

Properties

Events

CSS Parts

Accessibility

Contents