Question

I use jquery mobile sliders:

  <div data-role="fieldcontain">
    <input type="range" name="slider1" id="slider1" value="0" min="0" max="255"  />
  </div><br><br>
  <div data-role="fieldcontain">
    <select name="switcher1" id="switcher1" data-role="slider">
      <option value="0">Off</option>
      <option value="255">On</option>
    </select> 
  </div>      

It should work in the following way:

1. if switcher1 is touched, then slider1 value should be set either to 0 or to 255;
2. if slider1 value is changed, then (a) if it is = 0, then switcher1 should be set to 0, (b) else switcher1 value should be set to 255.

I’ve tried to do so with change event (the same is used for switcher1 change()):

var slider1_val = "0";
$('#slider1').change(function () {
    sVal = $(this).val();
    if (slider1_val !== sVal) {
        $("#slider1").val(sVal).slider("refresh");
        if (sVal == 0) {
            $("#switcher1").val(0).slider("refresh");
        } else {
            $("#switcher1").val(255).slider("refresh");
        }
        slider1_val = sVal;
    }
});

But looks like each call of refresh calls change event, so I am getting infinite loop.

Answer 1

It should work in the following way:

1. if switcher1 is touched, then slider1 value should be set either to 0 or to 255;
2. if slider1 value is changed, then (a) if it is = 0, then switcher1 should be set to 0, (b) else switcher1 value should be set to 255.

I’ve tried to do so with change event (the same is used for switcher1 change()):

The fact that you have two very different criteria for changing each control should tip you off that the change event handlers should be different as well. Using the same handlers leads to the infinite loop you are experiencing. The code below accounts for the strict change criteria you’ve provided. Note that the slider1 change handler changes switcher1 only if it needs to be changed (based on your criteria), not every time it is called. Also, note that in the slider1 change handler, switcher1_val is set before calling refresh, so that in case .slider('refresh') does call the change handler, the change handler will not do anything, because switcher1_val is already updated.

var linkSliders = function(sliderId, switcherId){
    var slider = $('#'+sliderId),
        switcher = $('#'+switcherId);
    var min = Math.min(switcher[0].options[0].value, switcher[0].options[1].value),
        max = Math.max(switcher[0].options[0].value, switcher[0].options[1].value);
    var sliderVal = switcherVal = min;

    // set the slider min/max to be the same as the switcher's, just in case they're different
    slider.attr('max', max).attr('min', min).slider('refresh');  
    slider.change(function(){
        var sVal = $(this).val();
        if(sliderVal != sVal){
            if( sVal == min && switcherVal!=min){
                switcherVal=min;
                switcher.val(min).slider('refresh');
            }else if(sVal>min && switcherVal!=max){
                switcherVal=max;
                switcher.val(max).slider('refresh');
            }
            sliderVal = sVal;
        }
    });  

    switcher.change(function(){
        var sVal = $(this).val();
        if(switcherVal != sVal){
            slider.val(sVal).slider('refresh');
            switcherVal = sVal;
        }
    });
};

linkSliders('slider1','switcher1');

See the live example.

Hope this helps.

---

Update: As requested, the example has been modified to make it more general.