Slider

Native range input with a 24px target area.

Source: src/stylus/components/slider.styl

With a value read-out

Pair .slider with .slider-header and .slider-value.

Compression 72 
<div class="slider-group">
  <div class="slider-header">
    <span>Compression</span>
    <span class="slider-value">72</span>
  </div>
  <input type="range" class="slider" value="72" aria-label="Compression" />
</div>

Status colours

.slider-success, .slider-warning and .slider-danger tint the track.

<input type="range" class="slider slider-success" value="30" aria-label="Success" />
<input type="range" class="slider slider-warning" value="60" aria-label="Warning" />
<input type="range" class="slider slider-danger" value="90" aria-label="Danger" />