Dual-handle range slider
A slider with two draggable handles for choosing the lowest and highest values of a range.
See it
What it is
A dual-handle range slider puts two draggable thumbs on one track: one sets the lower bound and the other sets the upper bound. The filled segment between them shows the currently accepted interval, such as $50 to $200. Airbnb's price filter is the one most people have already dragged.
Use one for exploring an approximate range in a bounded domain, most often price, duration, distance, or a date span. Pair it with visible numeric values, and provide editable fields when exact endpoints matter more than quick filtering.
Gotcha: HTML has no native two-thumb range control, so both thumbs need their own accessible name, value, and keyboard behavior. Decide whether the handles may cross or must stop at each other, keep the highlighted track correct in right-to-left layouts, and never make drag precision the only way to enter an exact value.
Ask AI for it
Build a price-range filter with the Radix UI Slider component using two values, a minimum of 0, a maximum of 1000, and a step of 10. Render one track, a highlighted range between the two thumbs, and persistent formatted labels showing the minimum and maximum prices. Label the thumbs with aria-label="Minimum price" and aria-label="Maximum price", support Arrow keys, PageUp, PageDown, Home, and End, and prevent the minimum from exceeding the maximum. Add two synchronized input type number fields for precise entry and style clear :focus-visible states.