Range slider

A range slider says both ends of an interval on one track. The filled part between the two handles is the selection, and everything outside it is what the filter throws away, which is the reason the control is worth its complexity: two number fields can express the same thing, but only the track shows how much of the range is left in.

Two handles on one track create a problem a single slider never has: they can meet. Decide early whether they may cross (usually not), whether they may sit on the same value (usually yes, giving an empty or single-value selection), and how a press on the bare track resolves, since the sensible answer is to move the nearer handle rather than whichever was touched last. When the handles are stacked on the same value they also have to be separable by keyboard, which is why each one is its own focusable element.

In ARIA the pattern is two slider elements inside one group, not one widget with two values. Each handle carries its own aria-valuenow, its own aria-valuemin and aria-valuemax (narrowed by the other handle’s position, which is how “cannot cross” is announced rather than merely enforced), and its own label, because “minimum price” and “maximum price” are two different questions. Give each an aria-valuetext when the number is a formatted value, so a screen reader reads $250 rather than 250.

The honest limitation is precision. A track a few hundred pixels wide covering a wide numeric range gives every pixel several units, so a range slider is for approximate bounds, and anything the reader needs to type exactly wants number fields beside it. Pair it with a histogram of where the results actually sit and it starts answering the question people really have, which is not “what is my budget” but “where is there anything”.