New Widget: Range Slider #5355

Closed
arschmitz opened this Issue Dec 7, 2012 · 9 comments

Comments

Projects
None yet
3 participants
Owner

arschmitz commented Dec 7, 2012

Create a new range slider widget which will be a two handled slider
current demo http://uglymongrel.com/jqm/range.html
also in range branch

arschmitz was assigned Dec 7, 2012

Contributor

jerone commented Dec 7, 2012

Some feedback:

Sometimes one of the handles gets beyond the other handles.

Can you make it so that, if you select the bar on the left from the left handle, it will adjust the left handle, even if it has focus on the right handle (if it make sense). And visa versa.

Maybe an option to adjust the left handle if you slide the right handle further to the left than the left handle is (and visa versa). Like I did here: http://jerone.github.com/jQueryMobileRangeSlider/

Good work.

Owner

arschmitz commented Dec 7, 2012

@jerone clicking on a handle and then clicking on the track will adjust that handle this is inline with how typical two handle sliders work and how the UI range slider works.

As far as pushing the handles my personal opinion is that this will make it too hard to do narrow ranges on touch devices because it will be to easy to push the other handle.

Contributor

jerone commented Dec 7, 2012

Sometimes one of the handles gets beyond the other handles.

I found out that's because the slider has more steps then the difference between min and max. Tested in FF18 and Chrome 25 precisely on value 47. If you drag it, you'll note it has two 47 values.

clicking on a handle and then clicking on the track will adjust that handle this is inline with how typical two handle sliders work and how the UI range slider works.

If you click the left handle to give it focus and click from the left on the left handle, the right handle will adjust. Which then should be the left handle.

As far as pushing the handles my personal opinion is that this will make it too hard to do narrow ranges on touch devices because it will be to easy to push the other handle.

That's why maybe an option.

Found another bug: resizing browser (or switching landscape and portrait) won't update the highlight correctly (tested on FF18 and Chrome 25).

Owner

arschmitz commented Dec 7, 2012

@jerone Thanks for looking into them not matching exactly I'll adjust the demo to use real values here and it should fix this

As far as the clicking to move I can't reproduce this right now but I'll give it a better look as well as the highlight updating properly on orientation change this weekend

As far as a push mode we discussed this today and we are not going to add this option it has usability issues. However the slider could be easily extended to add this if you wanted. We will consider a demo for it though

Owner

arschmitz commented Dec 11, 2012

@jerone Did some updates over the weekend fixed the issue you noticed with the highlight. Also implemented what you mentioned with making it so if you click the track on either extreme it will adjust the closest slider.

The issue with the handles not lining up is actually an issue with our base slider not properly respecting steps.
I fixed this.

I also wrote an extension to allow for the push mode you mentioned.

All of these updates are reflected in the demo

Contributor

jerone commented Dec 11, 2012

@arschmitz very cool. Just tested it on my desktop and iPad and working great!

The one with clicking on the track, as soon as you drag instead of click (press) it will drag the other handle. Need to be careful with that one.

Found one issue (I think a base slider bug); the highlight from the slider is below other elements and is cut off (confirmed on desktop FF & Chrome and iPad):
Untitled

Owner

arschmitz commented Dec 11, 2012

@jerone thanks for taking a look. on the track clicking. I am aware of this right now there isnt a way around it but the purpose of this is really to support things like WP7 where there are no touch events so this wont be an issue there im looking at solutions for this but nothing yet.

The highlight being cut off its actually an issue in range still fine tuning the css for range and will need to adjust for this.

Contributor

frequent commented Dec 14, 2012

👍 can't wait to kick my drop-2-single-sliders-on-top-of-each-other out of the door :-)

Owner

arschmitz commented Dec 31, 2012

range sliders are now merged into master and will be part of 1.3

arschmitz closed this Dec 31, 2012

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