9

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

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 ?

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

Emilie
  • 668
  • 1
  • 9
  • 21

3 Answers3

8

NO jQuery solution

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

Nice day

DavidTaubmann
  • 3,223
  • 2
  • 34
  • 43
2

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.

andrei
  • 2,934
  • 2
  • 23
  • 36
  • Oh thank you for that ! But do you know of there is a way in pure JavaScript ? (just to be sure to not use a library for nothing. – Emilie Nov 22 '13 at 10:30
  • jquery does it in javascript anyway. you could look in the source of jquery how they do it – andrei Nov 22 '13 at 10:32
  • Yes, you're right. I guess it is more easy, even if I'm not a big fan of external library. Thank you a lot for your answer. – Emilie Nov 22 '13 at 10:37
  • 1
    Unfortunately the jquery ui version does not work on mobile devices, and if you try to have jquery ui/jquery mobile working on the same page, they both have $.slider() methods, so they collide. – codeMonkey Jun 07 '16 at 19:24
2

jquery input range slider example:

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

agitcicek
  • 21
  • 2
  • Unfortunately the jquery ui version does not work on mobile devices, and if you try to have jquery ui/jquery mobile working on the same page, they both have $.slider() methods, so they collide. – codeMonkey Jun 07 '16 at 19:24