Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Feature Request: Slider Change Event #1589

Closed
@tenor

Description

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

Activity

toddparker

toddparker commented on May 9, 2011

@toddparker
Contributor

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

toddparker

toddparker commented on May 17, 2011

@toddparker
Contributor

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

ghost assigned on Jun 20, 2011
lxg

lxg commented on Sep 12, 2011

@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

hloehrmann commented on Sep 15, 2011

@hloehrmann

This is working pretty fine for me:

http://jsfiddle.net/jKPyj/

lxg

lxg commented on Sep 17, 2011

@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

VTWoods commented on Sep 17, 2011

@VTWoods
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');});
toddparker

toddparker commented on Sep 23, 2011

@toddparker
Contributor

Change event is now in and working correctly:

4fa6ccd

barbalex

barbalex commented on Nov 25, 2011

@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

toddparker commented on Nov 25, 2011

@toddparker
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)

barbalex

barbalex commented on Nov 26, 2011

@barbalex

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

lxg commented on Nov 26, 2011

@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

barbalex commented on Nov 26, 2011

@barbalex

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

18 remaining items

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @johnbender@jonnyreeves@lxg@toddparker@gseguin

      Issue actions

        Feature Request: Slider Change Event · Issue #1589 · jquery-archive/jquery-mobile