Input a double range of values with start and end values

Question

I have to select some values in a range, with a start and an end value, like in this image example :

I search with <input type="range"> HTML element, but it can't have two selectors.

I can use JavaScript (even a library if a natural way doesn't exist) or PHP , and of course HTML and CSS . I didn't find anything like that, so you are my last hope.

Do you know something ?

PS: I know I could use two basics inputs, but it is a client wish to have a graphical unique input like that.

Answer 1

NO jQuery solution

If you are not working with jQuery (like us) you would love this solution: https://refreshless.com/nouislider

Nice day

Answer 2

jquery input range slider example:

http://designm.ag/tutorials/howto-build-range-slider-input-with-jqueryui/

Answer 3

A jquery double range slider for example http://jqueryui.com/resources/demos/slider/range.html

On http://plugins.jquery.com/ you can find lots of jquery plugins. If you look for range slider you will have more than one results.