Slider · kit

Example

Label

With steps and a unit

Hint text below the control.

Disabled

Show the markup

<div class="kit-stack demo-fill" data-gap="5">
  <div class="kit-slider-field">
    <label for="sl-a">Label</label>
    <output for="sl-a" data-format="percent"></output>
    <input type="range" class="kit-slider" id="sl-a" min="0" max="100" value="40">
  </div>
  <div class="kit-slider-field">
    <label for="sl-b">With steps and a unit</label>
    <output for="sl-b" data-unit="GB"></output>
    <input type="range" class="kit-slider" id="sl-b" min="10" max="200" step="10" value="120" aria-describedby="sl-b-hint">
    <p class="kit-field-hint" id="sl-b-hint">Hint text below the control.</p>
  </div>
  <div class="kit-slider-field">
    <label for="sl-c">Disabled</label>
    <output for="sl-c"></output>
    <input type="range" class="kit-slider" id="sl-c" value="70" disabled>
  </div>
</div>

Usage

<div class="kit-slider-field">
  <label for="volume">Volume</label>
  <output for="volume" data-format="percent"></output>
  <input type="range" class="kit-slider" id="volume" min="0" max="100" value="40">
</div>

slider.js (in kit.js) keeps the filled part of the track and any <output for> in step with the value. On the output, data-format="percent" shows a percentage and data-unit="GB" adds a unit. min, max and step work as they do on any range input, and it submits with its form.

When the exact number matters, pair it with a number field, or use one instead.

Accessibility

It's the native control: arrow keys step, Page Up and Page Down jump, Home and End go to the ends, and screen readers read its value.
Label it with a <label>. The <output> repeats the value for sighted people; screen readers already hear it from the slider.
If the value means something other than a plain number, add aria-valuetext ("40 percent", "Medium") and keep it up to date.
The thumb is 18px, with the full height of the control as its target.