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.
40
Playground
Toggle every adjustable prop and watch the component — and the code — update live.
50
Usage
<Slider label="Volume" defaultValue={50} showValue /><kernel-slider label="Volume" value="50" show-value></kernel-slider>Props
| Prop | Type | Default |
|---|---|---|
label | ReactNode (required) | — |
hideLabel | boolean | false |
value / defaultValue | number | 0 |
min / max / step | number | 0 / 100 / 1 |
showValue | boolean | false |