Responsive, multi-handle HTML 5 or javascript range slider - Stack Overflow

admin管理员组

文章数量:1188227

I'm currently working on a responsive site and would like to employ a multi-handle range slider. I have worked with some javascript solutions that worked ok, but were not responsive.

I have considered the option of two html5 range inputs, which degrade gracefully to text inputs on older browsers. I would however, like to know if anyone has come across a javascript solution for a range slider with multiple handles, that works in responsive environments. Any ideas or tips?

I'm currently working on a responsive site and would like to employ a multi-handle range slider. I have worked with some javascript solutions that worked ok, but were not responsive.

I have considered the option of two html5 range inputs, which degrade gracefully to text inputs on older browsers. I would however, like to know if anyone has come across a javascript solution for a range slider with multiple handles, that works in responsive environments. Any ideas or tips?

• javascript
• html
• range
• responsive-design

Share Improve this question Follow asked Jan 2, 2013 at 19:08 jcbfshrjcbfshr 16111 gold badge22 silver badges1212 bronze badges 1

• Have you taken a look at jQuery UI yet? – Sethen Commented Jan 2, 2013 at 19:09

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 12

You could have a look at noUiSlider.

It supports touch on a bunch of devices, and it works well with responsive designs. There's no dependencies on jQuery etc.

Disclosure: I made it.

Check out my slider I've written for my personal use a while ago. It has both the linear (horizontal/vertical) and circular implementations, works on desktop and mobile, it is lightweight (~5Kb) and fully customizable.

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

It's well supported among different browsers.

i used the fd-slider polyfill / with modernizr-loader, it was usable on the ipad. further devices were not tested, because the small-screen version didn't used them.

These look really slick but I haven't tried them:

http://ghusse.github.io/jQRangeSlider/demo.html

http://razorfish.github.io/JS-Range-Slider/

Multihandle slider composed of 2 native inputs, by Lea Verou here

For those who still end up here, looking around for options, I came across this one:

http://vanderlee.github.io/limitslider/

It allows you to pass an array of values, and even style the gaps between via an array of options.

本文标签： Responsivemultihandle HTML 5 or javascript range sliderStack Overflow