jQuery Mobile Slider - refresh event

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 ch开发者_运维问答ange event came from a user slide or from a manual .slider("refresh") function call?

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();
});

The problem with the e.originalEvent and the jquery mobile slider is perplexing to me:

http://jsfiddle.net/82B4m/68/

If the slider is dragged, the originalEvent is undefined, or as @Nicola calls it, 'not human'; if the input value itself is changed, the originalEvent exists, and all is well.

So, the trick seems to be getting the slidechange event rather than the change event, but I don't see that slidechange is documented in the jquery MOBILE docs.

You can also do an unbind before refreshing the slider and then bind again to your function.

$('#durationSlider').unbind("change");
$('#durationSlider').slider("refresh");
$('#durationSlider').bind("change", MyFunction);