Slider

A range input using <input type="range">.

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 />