Question

I’ve got a page with 2 jQuery Mobile sliders, and functions on the .change() events for both slider.

I need to establish a relationship between the 2 sliders, such that if I slide the 1st slider, it changes the max of the 2nd slider.

Problem is that if I do this in the change event of the 1st slider: e.g:
$('#durationSlider').max("10"); // Change the max of the 2nd slider

$('#durationSlider').slider("refresh"); // Visually update the 2nd slider

Then this obviously triggers the change event of 2nd slider and it cause recursive code.

Is there any way to pass a flag or data to indicate if the change event came from a user slide or from a manual .slider(“refresh”) function call?

Answer 1

What you can do to check if an evt is “manual” or “computer” generated is to check the originalEvent in the change function.

 change: function(evt, ui){
           if (evt.originalEvent === undefined){
              //not human
            }else{
             //human
             }

Look at this fiddle fro an example http://jsfiddle.net/nicolapeluchetti/82B4m/

code of the fiddle (just in case jsfiddle is down):

<button id='b'>Click me</button>

<button id='c'>Click the other</button>

$('#b').click(function(e) {
    if (e.originalEvent === undefined) {
        alert('not human');
    } else {
        alert('human');
    }

});

$('#c').click(function(e) {
    $('#b').click();
});