Search code examples
jqueryjquery-mobileevent-handlingslidertouch-event

JQuery mobile slideStop and input field issue


I've a problem with JQuery Mobile slider. In my case user should be able to enter value from the slider input field as well as using the slider itself. However I don't want to use the "change" event to handle slide changes since there will be lot of those when moving the slider. I know this can be solved by using "slidestop" event but how to get event fired when user has entered the value to the input field ? When you enter number to it slider moves but it doesn't fire any events. Preferably I would both slide stop and change to be bound to the same handler.

So slide stop works ok:

$("#tempslider").on("slidestop", function(e) {
    $("#output").html($("#tempslider").val());
});

but on change triggers with every slide movement + enter key in the input field.

$("#tempslider").on("change", function(e) {
    $("#change").html($("#tempslider").val());
}

Here is a simple fiddle with slider with change event currently commented out: jsfiddle


Solution

  • I know this is a dead post, but the comment from @Janne finally helped me to figure this out, and I hope it helps even one person with the same issue.

    let slider = $('#<sliderId>');
    
    slider.on('change', function() {
       slider.trigger('slidestop');
    });
    

    It seems silly to me still that jQuery Mobile does not bind input change to the slidestop event (assuming a callback for only one or the other is supplied at initialization).