Slider: Allow two handles on a slider-bar

[hpbuniat]

I've modified the ui.slider to allow multiple handles on a slider-bar (like jquery-ui already does). This is still lacking explicit tests and i'm going to integrate the changes made for jquery/jquery-mobile/#2381 - but i'd like to get some early feedback.

[v00d00j3st3r]

+1

[scottjehl]

great idea. added to the feature requests page for post 1.0 https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

[phillpafford]

Releated: http://stackoverflow.com/questions/8895748/jquery-mobile-dual-range-slider

[ghost]

I don't get why jQuery Mobile isn't supporting range sliders.

Will it ever be supported?

[toddparker]

We plan to, yes, but it's tricky to make these work when some fo our supported devices don't have touch events. You need to tap the track on these platforms so if there are two sliders, the interaction is tricky.

[ghost]

Hmm, if these devices aren't supporting touch, how can the single thumb slider work?

[toddparker]

Two options: either enter in the value via the input or tap the track and the handle jumps to that position. To make a range work, we'd need to show both inputs and figure out which slider you meant to move if you tap the track.

[ghost]

But that is what the current range slider in jQuery UI is doing. Shouldn't be that hard to copy?

Isn't jQuery Mobile based on jQuery UI?

[toddparker]

We share the same widget factory but we have a different slider codebase right now. UI's slider doesn't work with touch at all right now so we had to go our own way.

[GavinHellyer]

Why not detect touch device else fallback to input boxes/2 dropdown lists? or simply have a click/tap/touch event on the slider handle and then click/tap/touch on the bar to move that handle for example: http://jsfiddle.net/PJ7VE/1/ modified from http://jsfiddle.net/NkjQr/12/

[jerone]

I've implemented a range slider that contains 2 sliders combined.
Source: https://github.com/jerone/jQueryMobileRangeSlider
Demo: http://jerone.github.com/jQueryMobileRangeSlider/

[jaspermdegroot]

@jerone - That looks great!

[jerone]

@jerone - That looks great!

@uGoMobi I just did a clean up and fixed some small bugs to that repo.

[arschmitz]

@jerone after some discussion I think we are actually going to go a little different direction with this. We are going to go with one based on this jsbin: http://jsbin.com/uzaret/514/ We really appreciate your work though!

[GavinHellyer]

What happens if you want a slider there doesn't have numbers. i.e. a range of places?
I know that is a huge change of conversation, but what I have done on the site I'm working on is have 2 select boxes (As fall over) and then jQuery mobile converts them into a dual range slider and keeps the values.

Just food for thought.

[toddparker]

@darigon - I think that is a valid use case, but it's outside the scope of the sliders currently. We only support numeric input, like a standard input with a type'="range" but using selects is a nice feature request. We built something similar as an extension to UI's slider a while back:
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support

Mind creating a new ticket for the ability to use selects for the slider and add it to the feature request wiki page here.