Slider

Adjust a value along a continuous range.

Live example

A reviewed public example, isolated from this page.

import { Slider } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

range<div>
Filled portion of the track; size set structurally from value/min/max.
Uses native semantics
root<div>
Slider container; owns value context, commit batching, and track pointer hit-testing. With a name it also renders the hidden form-associated input. Orientation via data-orientation.
Uses native semantics
thumb<button>
role=slider thumb; keyboard + offset-preserving pointer drag. Owns the accessible name and value attrs, and takes focus when the track is clicked.
ARIA role: slider
track<div>
Track rail; pointer down focuses the thumb and sets the value. Holds Range.
Uses native semantics