RANGE: Styled native input[type=range] slider
CLASSES: .range | .range-labels | .range-value
The native <input type="range"> supplies every bit of keyboard and
screen-reader behaviour for free — arrow keys, Home/End, and
role="slider" with aria-valuenow/min/max all come from the
browser. range_controller.js only mirrors the value into the
.range-value pill and a --range-progress custom property that
paints the filled portion of the track — it adds no ARIA of its own.
Search radius filter — the filter-rail's most-requested missing
control. Drag the thumb or focus it and use the arrow keys; the pill label and the
filled track update live on every input event.
<input type="range" class="range" min="0" max="10" step="1" value="3" data-range-target="input" data-action="input->range#update change->range#commit">
Stepped values: step="25" snaps to £25 increments —
arrow keys move a whole step at a time.
<input type="range" class="range" min="0" max="500" step="25" value="150">
Disabled: the real [disabled] attribute dims the track
and thumb and blocks interaction — tokens only, no opacity magic numbers.
<input type="range" class="range" min="0" max="10" value="5" disabled>