Slider

A real <input type="range">. Dragging, arrow-key stepping, Page Up/Down, Home/End, and touch all come from the browser. The filled portion of the track has no standardised styling API yet, so the fill percentage is computed in JavaScript and fed back in as a CSS custom property, that hand-off is the only JavaScript involved.

The inset variant turns the track itself into a control: the same height and corner as a default Button or Tabs list, filled with the accent colour and dragged by a slim bar inside the fill. It follows the theme's rounding — square at Sharp, a pill at Round — and optional startLabel/endLabel captions change colour exactly where the fill crosses them.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

<Slider label="Volume" defaultValue={50} showValue />

<kernel-slider label="Volume" value="50" show-value></kernel-slider>

Props