Multiple Number Range Input

A frustration I’ve had is that there’s no “native” way for users to input a range of numbers, without using to number inputs. HTML5’s <input type="range">, I assumed would deal with this but it only allows selection of a single value. I would propose to extend this element using the multiple attribute already used for <select>.

<input type="range" multiple>

This would create the range slider, but with two slider “thumbs” to select two values. The input’s value would be an array containing the two selected values, lowest first.

An example use case would be an Ecommerce website, to allow users to filter by price range — without having to jump between multiple inputs.

Already got you: https://html.spec.whatwg.org/multipage/forms.html#range-state-(type=range):attr-input-multiple-3

Nice! Why not allow it on date inputs as well? Date ranges are pretty common.

Date pickers are already something that range from not very good to terrible in implementation, but there is no reason not to have multiple date ranges.

The HTML specification did allow input type="range" multiple for years, but it has been removed because there are no implementations. I agree it would be a good thing to do.

Check out this Jquery UI range slider - jquery ui for the same

I might have missed something, but that particular widget (slider) does not seem to be using ARIA roles and attributes. If so, how could AT users use such a widget?

By fixing it in JQuery That’s probably achievable…