[Input] Dual Range slider and strict markers

[sakgoyal]

What problem are you trying to solve?

I want a good way to make dual/multi range sliders. Lots of websites (especially ecommerce) have filters to help people select a product that meets their requirements (eg price filters).

I would also appreciate a good way to force the use of markers in the selection

By making this into a native element, it will simplify the web by needing less javascript and making things significantly simpler.

What solutions exist today?

lots of libraries layer 2 sliders on top of each other with lots of css hacks as far as I understand.

currently I have been using jquery ui's slider.

How would you solve it?

1st requested feature

<input type="dualrange" min="15" max="100" value="25,78">
             ^ new option                           ^ csv

this css would be used to override the default format that dualrange would provide

input[type="dualrange"] {
  &::track {/* track container*/}
  &::trackfill {/* the selected range inside the track */}
  &::handle {/* the handles/"thumb" of the slider*/}
}

this should automatically take into account that the handles cannot cross over each other, and adhere to min/max (and rescale accordingly)

2nd requested feature

currently without the new strict attribute, the slider "snaps" to a close marker when you approach it, but the input still accepts values in between the options. adding a strict option will mean only the options in the datalist will be accepted. the slider will still snap, but it will always snap to the nearest marker

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#adding_tick_marks -->
<input type="range" id="temp" list="markers" strict="true"/>
                                             ^ new attribute
<datalist id="markers">
  <option value="0"></option>
  ...
  <option value="100"></option>
</datalist>

another option would be to combine the step attribute with the datalist. maybe something like:

<input type="range" id="temp" step="#markers"/>
                              ^ new acceptable value

Anything else?

I am basing my idea on how much I like the functionality there. I think it works extremely well, and I strongly believe having this as a native feature would be extremely useful

eg:

• https://pcpartpicker.com/products/cpu
• "Core Count" slider
• notice the dual slider with strict steps

I would really love some feedback on this