Range / Value Slider

A themed native slider. Drag or use the arrow keys; the value submits with the form — no JavaScript. Branded with accent-color.

No live readout while dragging (that needs JS). The chosen value POSTs with the form and the server echoes it back; the scale labels orient you meanwhile.

Markup

<!-- a native <input type="range">, branded via accent-color; the value
     submits with the surrounding form -->
<div class="casca-range-field">
  <label class="casca-range-label" for="threshold">Threshold</label>
  <input class="casca-range" type="range" id="threshold" name="threshold"
         min="0" max="100" value="60" step="5">
  <div class="casca-range-scale" aria-hidden="true"><span>0</span><span>50</span><span>100</span></div>
</div>