Responsive, multi-armed HTML 5 or javascript range slider

Question

I am currently working on a responsive site and would like to use a range slider with multiple descriptors. I worked with some javascript solutions that worked fine but didn't respond.

I considered the option of two html5 range inputs that correctly degrade to text inputs in older browsers. However, I would like to know if anyone has come across a javascript solution for a multi-handle range slider that works in environments with flexibility. Any ideas or tips?

Answer 1

I used fd-slider polyfill / with modernizr-loader, which could be used on ipad. other devices were not tested because the small screen version did not use them.

Answer 2

You can watch noUiSlider .

It supports touching multiple devices, and it works well with responsive projects. No jQuery dependencies, etc.

Disclosure: I did it.

Answer 3

Try the jQuery range slider: http://jqueryui.com/slider/#range .

It is well supported among different browsers.

Answer 4

They look very smooth, but I have not tried them:

http://ghusse.imtqy.com/jQRangeSlider/demo.html

http://razorfish.imtqy.com/JS-Range-Slider/

Answer 5

A multi-user slider consisting of 2 built-in inputs, Lea Verou here

Answer 6

For those who are still here, looking back at the options, I came across this:

http://vanderlee.imtqy.com/limitslider/

It allows you to transfer an array of values ​​and even erase the gaps between arrays of parameters.

Answer 7

Check out my slider, which I wrote for personal use a while ago. It has linear (horizontal / vertical) and circular implementation, works on desktop and mobile devices, has light weight (~ 5Kb) and is fully customizable.