Continuous values chosen by feel, with exact entry as backup.
| Prop / event | Type | Notes |
|---|---|---|
| value / onChange | number / (v) => void | Current value; controlled |
| min / max / step | number | Range and snapping increment |
| showValue / showInput | boolean | Right-aligned readout, or an exact number field |
| ticks | boolean | Labelled marks under the track |
| onChangeCommitted | (v) => void | Fires on release — use for network writes |
| ← / → · Home / End | — | Step by one; jump to min / max |
Use a Slider for a value chosen by feel within a known range. When exact values matter more than feel, lead with a number Input.
Show the current value beside the track so the choice is legible.
Don't hide the value when the exact number matters. Guessing is not feel.
Snap to steps with ticks when only certain values are valid.
Don't use a coarse slider for values needing precision. Give a number field.
Media and audio levels, adjusted by feel with a live readout.
Budget filters pair the track with an exact number entry.
Stepped zoom levels where only set values make sense.
| Token | Value | Role |
|---|---|---|
| --sld-track-h | 4px | Track thickness |
| --sld-thumb | 16px | Thumb diameter |
| --sld-fill | #FF7A00 | Filled track and thumb |
| --sld-track | #242428 | Unfilled remainder |
| --sld-cutout | 3px page bg | Ring inside the thumb |
| --sld-focus | rgba(255,122,0,.3) | 4px focus halo |
<label class="o-slider">
<input type="range" class="o-range" min="0" max="100" value="64"
style="--pct:64%" aria-label="Volume" />
<span class="o-slider__val">64%</span>
</label>