Two-handle range

data-range since 0.1.0

Two native sliders over one track, for a span rather than a number. Each handle is a real <input type="range">, so each one is reachable, draggable and typeable by itself.

Basic

Budget 20–80

html

<fieldset data-range>
  <legend>Budget</legend>
  <input type="range" name="min" min="0" max="100" value="20" aria-label="Lowest">
  <input type="range" name="max" min="0" max="100" value="80" aria-label="Highest">
  <output>20–80</output>
</fieldset>

Drag either handle or use the arrow keys. Push one past the other and it takes the other along.

Notes

s72.js writes --s72-lo and --s72-hi on the fieldset as percentages, and the first slider's track paints the span between them.
The two inputs share one grid cell. Each passes the pointer through everywhere but its handle, so the lower handle stays reachable under the upper one.
An <output> is filled with the pair, as "20–80". Leave it out and nothing else changes.
Give each input its own aria-label: the legend names the pair, not the handles.
The track, the fill and the handles are the slider's, so a page that restyles input[type="range"] restyles this too.