Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Feature Request: Slider Change Event #1589

Closed
tenor opened this Issue · 23 comments
@tenor

Can we have a change event for the slider control?

This feature will help creation of much better interactive pages.

Something like:

$('input').slider({change: function});

will be nice, and should respond to tap, slide and manual editing of the slider value in the adjacent textbox.

I used the hack available at http://stackoverflow.com/questions/4583083/jquerymobile-how-to-work-with-slider-events. It worked on the version prior to JQM 1.0a4.1, but it doesn't work anymore.

Thanks.

@toddparker

This really should be part of the widget, we'll try to land this for 1.0

@toddparker

Just a note that this should be for slider and the flip switch which is also based on the slider.

@gseguin gseguin was assigned
@johnbender johnbender was assigned
@lxg

In jQM 1.0-beta3, the slider does provide a "change" event, at least indirectly, as the updated text input fires the event. But, in order to execute AJAX requests when the slider is used, it would be nice to have some sort of "sliderReleased" event. Because, if using the "change" event while the slider is moved, there would be very many AJAX requests; one for each step made on the slider.

One could use mouseup or vmouseup on $('.ui-slider-handle') for this. But currently, vmouseup doesn't work at all, and mouseup only works if the mouse is released while above the slider handle.

Cf. http://pastebin.com/1WsjMndc

@hloehrmann

This is working pretty fine for me:

http://jsfiddle.net/jKPyj/

@lxg

This does work on the flip switch, but on the "real" slider, it has got the same problem as my solution: When you release the button while the mouse is not above the handle, the event will not fire.

@VTWoods

To fix that, I think I bound functions to the blur and focus of the slider in question. What makes this even more tricky is that there is no way to identify the .ui-slider that is associated with a specific slider. I used the code below as a hack. But I couldn't figure out how to associate a .ui-slider with a JQM slider.

$('.ui-slider').live('mousedown', function(){$('#volumeSlider').trigger('start');});
$('.ui-slider').live('touchstart', function(){$('#volumeSlider').trigger('start');});
$('.ui-slider').live('mouseup', function(){$('#volumeSlider').trigger('stop');});
$('.ui-slider').live('touchend', function(){$('#volumeSlider').trigger('stop');});
$('#volumeSlider').live('focus',function(){$('#volumeSlider').trigger('start');});
$('#volumeSlider').live('blur',function(){$('#volumeSlider').trigger('stop');});
@toddparker

Change event is now in and working correctly:

4fa6ccd

@toddparker toddparker closed this
@barbalex

I am using the change event to automatically save changes in data without having to click save.
Unfortunately when the slider is moved it fires a change event for every step. So if you move the slider from 0 to 100 that's 100 events in no time. This blows my saving and results in data conflicts. I am using jQuery mobile 1.0.

@toddparker
@barbalex
@lxg

@toddparker: A dedicated event for the slider, e.g. “sliderRelease” would be very helpful. Using a timeout would be a wrong solution.

Just think of the real-world scenario: You want to fire an AJAX request as soon as someone releases the slider. If you use a timeout, there would always be a delay. The onChange event, however, would fire for each step on the slider's scale.

@barbalex

+1 for the dedicated event
still need to know how to identify the specific slider in a change event

@toddparker
@lxg

Done, added an entry in the slider section of the Feature Requests page.

@vpxavier

Hello,
I do also absolutely need this functionality.
This is required in order to dispatch one and only one event when the slider has been changed.
I need it in forms (to submit) but also to update other displayed values when the slider's value has been changed.
Thanks for your good work.

@vpxavier

Could this issue be reopened?
A sliderReleased event would be great...

@mattburns

+1 for the dedicated sliderReleased event.

@toddparker toddparker reopened this
@toddparker

We'll take a look at this for 1.2

@vpxavier

Thank you SO much for taking care of this...

@barbalex

looking forward to it
thanks, guys!

@jasondscott jasondscott was assigned
@jonnyreeves

Those looking for a temporary patch for jQuery Mobile 1.1 can drop the following code into your applications' initialization routine. It will modify all jQuery Mobile Slider controls to dispatch a start and stop event as expected:

$(document).on({
    "mousedown touchstart": function () {
        $(this).siblings('input').trigger('start');
    },
    "mouseup touchend": function () {
        $(this).siblings('input').trigger('stop');
    }
}, ".ui-slider");
@johnbender johnbender was assigned
@johnbender

@jonnyreeves

98dfce2

Let me know if that works for you.

@johnbender

Closing with the addition of the docs, please post here if what we've put in place doesn't work for you.

@johnbender johnbender closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.