Keeping two sliders synced in jQuery Mobile

Made in response to: http://stackoverflow.com/questions/7541478/how-to-synchronize-sliders-values

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css">
<div data-role="page">
<div data-role="content"> 

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

JavaScript

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');