Code examples

This is one of the exceedingly rare instances where a custom element makes a lot of sense.

Use a custom element

<div id="range-label">
  How much cowbell?
</div>
<div class="track">
  <div id="thumb"
       role="slider"
       tabindex="0"
       aria-valuemin="0"
       aria-valuenow="10"
       aria-valuemax="11"
       aria-labelledby="range-label">
  </div>
</div>

Semantic HTML

While there is a native range input, it is difficult to style reliably across browsers.

<div class="range-group">
  <!-- Input hidden from the screen reader 
    and keyboard to avoid repetition -->
  <input tabindex="-1" 
          value="10" 
          aria-hidden="true"
          class="range-value" 
          id="cowbell-range-value">
  <div>
    <label for="cowbell-range">
      How much cowbell?
    </label>
    <input type="range"
      id="cowbell-range"
      name="cowbell"
      min="0"
      max="11"
      value="10"
      step="1">
  </div>
</div>

Related range slider input entries