Slider: Allow two handles on a slider-bar #2401

Closed
wants to merge 3 commits into
from

Conversation

Projects
None yet
9 participants
@hpbuniat
Contributor

hpbuniat commented Sep 8, 2011

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

This comment has been minimized.

Show comment Hide comment
@v00d00j3st3r

v00d00j3st3r Sep 16, 2011

+1

+1

@scottjehl

This comment has been minimized.

Show comment Hide comment
@scottjehl

scottjehl Sep 21, 2011

Contributor

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

Contributor

scottjehl commented Sep 21, 2011

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

@scottjehl scottjehl closed this Sep 21, 2011

@ghost

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Sep 13, 2012

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

Will it ever be supported?

ghost commented Sep 13, 2012

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

Will it ever be supported?

@toddparker

This comment has been minimized.

Show comment Hide comment
@toddparker

toddparker Sep 13, 2012

Contributor

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.

Contributor

toddparker commented Sep 13, 2012

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

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Sep 13, 2012

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

ghost commented Sep 13, 2012

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

@toddparker

This comment has been minimized.

Show comment Hide comment
@toddparker

toddparker Sep 13, 2012

Contributor

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.

Contributor

toddparker commented Sep 13, 2012

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

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Sep 13, 2012

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?

ghost commented Sep 13, 2012

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

This comment has been minimized.

Show comment Hide comment
@toddparker

toddparker Sep 13, 2012

Contributor

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.

Contributor

toddparker commented Sep 13, 2012

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

This comment has been minimized.

Show comment Hide comment
@GavinHellyer

GavinHellyer Nov 21, 2012

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/

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

This comment has been minimized.

Show comment Hide comment
@jerone

jerone Nov 21, 2012

Contributor

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

Contributor

jerone commented Nov 21, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot Nov 21, 2012

Member

@jerone - That looks great!

Member

jaspermdegroot commented Nov 21, 2012

@jerone - That looks great!

@jerone

This comment has been minimized.

Show comment Hide comment
@jerone

jerone Nov 21, 2012

Contributor

@jerone - That looks great!

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

Contributor

jerone commented Nov 21, 2012

@jerone - That looks great!

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

@arschmitz

This comment has been minimized.

Show comment Hide comment
@arschmitz

arschmitz Nov 21, 2012

Owner

@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!

Owner

arschmitz commented Nov 21, 2012

@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

This comment has been minimized.

Show comment Hide comment
@GavinHellyer

GavinHellyer Nov 21, 2012

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.

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

This comment has been minimized.

Show comment Hide comment
@toddparker

toddparker Nov 21, 2012

Contributor

@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.

Contributor

toddparker commented Nov 21, 2012

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment