New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Slider Change Event #1589

Closed
tenor opened this Issue May 9, 2011 · 23 comments

Comments

@tenor

tenor commented May 9, 2011

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 comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 9, 2011

Contributor

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

Contributor

toddparker commented May 9, 2011

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 17, 2011

Contributor

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

Contributor

toddparker commented May 17, 2011

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

@ghost ghost assigned gseguin Jun 20, 2011

@ghost ghost assigned johnbender Aug 8, 2011

@lxg

This comment has been minimized.

Show comment
Hide comment
@lxg

lxg Sep 12, 2011

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

lxg commented Sep 12, 2011

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 comment has been minimized.

Show comment
Hide comment
@hloehrmann

hloehrmann Sep 15, 2011

This is working pretty fine for me:

http://jsfiddle.net/jKPyj/

hloehrmann commented Sep 15, 2011

This is working pretty fine for me:

http://jsfiddle.net/jKPyj/

@lxg

This comment has been minimized.

Show comment
Hide comment
@lxg

lxg Sep 17, 2011

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.

lxg commented Sep 17, 2011

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

This comment has been minimized.

Show comment
Hide comment
@VTWoods

VTWoods Sep 17, 2011

Contributor

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');});
Contributor

VTWoods commented Sep 17, 2011

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 23, 2011

Contributor

Change event is now in and working correctly:

4fa6ccd

Contributor

toddparker commented Sep 23, 2011

Change event is now in and working correctly:

4fa6ccd

@toddparker toddparker closed this Sep 23, 2011

@barbalex

This comment has been minimized.

Show comment
Hide comment
@barbalex

barbalex Nov 25, 2011

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.

barbalex commented Nov 25, 2011

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Nov 25, 2011

Contributor

I'm not sure I understand this request. If you move the slider, it should immediately update the value and trigger a change event so the slider and input are in sync. Seems be working correctly now where the input updates as you slide do you can see what the value is. If we only updated this at the end of the slide, it would be odd. Couldn't you just wait a bit before saving the value?

On Nov 25, 2011, at 6:23 PM, "Alexander Gabriel" reply@reply.github.com wrote:

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.


Reply to this email directly or view it on GitHub:
#1589 (comment)

Contributor

toddparker commented Nov 25, 2011

I'm not sure I understand this request. If you move the slider, it should immediately update the value and trigger a change event so the slider and input are in sync. Seems be working correctly now where the input updates as you slide do you can see what the value is. If we only updated this at the end of the slide, it would be odd. Couldn't you just wait a bit before saving the value?

On Nov 25, 2011, at 6:23 PM, "Alexander Gabriel" reply@reply.github.com wrote:

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.


Reply to this email directly or view it on GitHub:
#1589 (comment)

@barbalex

This comment has been minimized.

Show comment
Hide comment
@barbalex

barbalex Nov 26, 2011

Hi Todd

Would I do that using setTimeout?

I am building my page dynamically. So I am saving like this:
$("[name^='a']").change(function() {

  • saveData();*
    });
    How could I differentiate saving for specific sliders (as I don't want to wait when
    saving other data)? I tried using this.type = "range" but it didn't work.

I believe this information would be helpful for others too, in the docs.

Thanks for your help - and for this great tool!

Alex

2011/11/26 Todd Parker <
reply@reply.github.com

I'm not sure I understand this request. If you move the slider, it should
immediately update the value and trigger a change event so the slider and
input are in sync. Seems be working correctly now where the input updates
as you slide do you can see what the value is. If we only updated this at
the end of the slide, it would be odd. Couldn't you just wait a bit before
saving the value?

On Nov 25, 2011, at 6:23 PM, "Alexander Gabriel" reply@reply.github.com
wrote:

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.


Reply to this email directly or view it on GitHub:
#1589 (comment)


Reply to this email directly or view it on GitHub:
#1589 (comment)

barbalex commented Nov 26, 2011

Hi Todd

Would I do that using setTimeout?

I am building my page dynamically. So I am saving like this:
$("[name^='a']").change(function() {

  • saveData();*
    });
    How could I differentiate saving for specific sliders (as I don't want to wait when
    saving other data)? I tried using this.type = "range" but it didn't work.

I believe this information would be helpful for others too, in the docs.

Thanks for your help - and for this great tool!

Alex

2011/11/26 Todd Parker <
reply@reply.github.com

I'm not sure I understand this request. If you move the slider, it should
immediately update the value and trigger a change event so the slider and
input are in sync. Seems be working correctly now where the input updates
as you slide do you can see what the value is. If we only updated this at
the end of the slide, it would be odd. Couldn't you just wait a bit before
saving the value?

On Nov 25, 2011, at 6:23 PM, "Alexander Gabriel" reply@reply.github.com
wrote:

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.


Reply to this email directly or view it on GitHub:
#1589 (comment)


Reply to this email directly or view it on GitHub:
#1589 (comment)

@lxg

This comment has been minimized.

Show comment
Hide comment
@lxg

lxg Nov 26, 2011

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

lxg commented Nov 26, 2011

@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

This comment has been minimized.

Show comment
Hide comment
@barbalex

barbalex Nov 26, 2011

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

barbalex commented Nov 26, 2011

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Nov 26, 2011

Contributor

Please add a link to this issue to the feature request wiki page, then close it. Well reopen when we work on it.

.................................. . . . .
Todd Parker
Partner, Filament Group Inc.
102 South Street #3 Boston, MA 02111
todd@filamentgroup.com // 617.953.1617

On Nov 26, 2011, at 10:40 AM, "Alexander Gabriel" reply@reply.github.com wrote:

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


Reply to this email directly or view it on GitHub:
#1589 (comment)

Contributor

toddparker commented Nov 26, 2011

Please add a link to this issue to the feature request wiki page, then close it. Well reopen when we work on it.

.................................. . . . .
Todd Parker
Partner, Filament Group Inc.
102 South Street #3 Boston, MA 02111
todd@filamentgroup.com // 617.953.1617

On Nov 26, 2011, at 10:40 AM, "Alexander Gabriel" reply@reply.github.com wrote:

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


Reply to this email directly or view it on GitHub:
#1589 (comment)

@lxg

This comment has been minimized.

Show comment
Hide comment
@lxg

lxg Nov 26, 2011

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

lxg commented Nov 26, 2011

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

@vpxavier

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier Dec 20, 2011

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 commented Dec 20, 2011

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

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier Mar 5, 2012

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

vpxavier commented Mar 5, 2012

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

@mattburns

This comment has been minimized.

Show comment
Hide comment
@mattburns

mattburns Apr 17, 2012

+1 for the dedicated sliderReleased event.

mattburns commented Apr 17, 2012

+1 for the dedicated sliderReleased event.

@toddparker toddparker reopened this Apr 28, 2012

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 28, 2012

Contributor

We'll take a look at this for 1.2

Contributor

toddparker commented Apr 28, 2012

We'll take a look at this for 1.2

@vpxavier

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier Apr 28, 2012

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

vpxavier commented Apr 28, 2012

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

@barbalex

This comment has been minimized.

Show comment
Hide comment
@barbalex

barbalex Apr 28, 2012

looking forward to it
thanks, guys!

barbalex commented Apr 28, 2012

looking forward to it
thanks, guys!

@jonnyreeves

This comment has been minimized.

Show comment
Hide comment
@jonnyreeves

jonnyreeves Jul 24, 2012

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");

jonnyreeves commented Jul 24, 2012

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");

@ghost ghost assigned johnbender Jul 26, 2012

@johnbender

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Jul 27, 2012

Contributor

@jonnyreeves

98dfce2

Let me know if that works for you.

Contributor

johnbender commented Jul 27, 2012

@jonnyreeves

98dfce2

Let me know if that works for you.

@johnbender

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Jul 30, 2012

Contributor

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

Contributor

johnbender commented Jul 30, 2012

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 Jul 30, 2012

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