A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

Multiple Number Range Input

LewisDorigo
2014-09-26

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.

tabatkins
2014-09-26

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

leaverou
2016-05-31

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

chaals
2016-05-31

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.

srichakradhar
2016-11-25

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

IanY
2016-11-25

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?

chaals
2016-11-26

By fixing it in JQuery :slight_smile: That’s probably achievable…