<link rel="stylesheet" href="https://esm.sh/@erikt/ui/slider.css" />Default
<input type="range" />Filled
Set --pct on the element to show a filled track. Update it
on input events to keep it in sync with the value.
<input
type="range"
style="--pct: 0.5"
oninput="
this.style.setProperty(
'--pct',
(this.value - this.min) / (this.max - this.min),
)
"
/>Step
Use step to snap the thumb to discrete intervals.
<input type="range" step="25" />Disabled
<input type="range" disabled />API reference
| Type | Classes / attributes | What it does |
|---|---|---|
| Fill | --pct: 0.5 |
Fills the track up to this fraction, from 0 to 1 |
| Disabled | [disabled] |
Fades the slider and blocks input |