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
Usage
import { Slider } from "@kernelui/react";
<Slider label="Volume" defaultValue={50} showValue />Props
| Prop | Type | Default |
|---|---|---|
label | ReactNode (required) | — |
value / defaultValue | number | 0 |
min / max / step | number | 0 / 100 / 1 |
showValue | boolean | false |