1 / 2
Two-Handle Price Filter From Real Inputs
Every shop has a two-handle price filter and no HTML element does it, so people reach for a slider library or fake the whole thing with divs — and throw away keyboard support on the way. Stack two real range inputs on one track instead. pointer-events: none lets a click fall straight through the invisible tracks, pointer-events: auto on the thumbs keeps each one grabbable, and that pair is the entire trick: arrow keys, Home/End, Tab focus and aria all still work. One fill div reads both values, each input clamps against the other so the handles cannot cross, and the higher one sits on top or its thumb goes unreachable at the far end.
cssaccessibilityui/uxformsjavascriptrange