多jQuery的滑塊與固定值

Question

我試圖做出滑塊，即得到了100

規定的最高限額因此，如果#slider_1上升到72，#slider_2全自動變成了以28 的腳本設置寬度爲#right和#left。

現在，我得到了以下幾點：

   $("#width-r").slider({ 
       slide: function(event, ui) { 
        var other = $("#width-l"); 
        var avi = 100 - $("#width-r").slider("value"); 
        var iva = 100 - avi; 
        if(other.slider("value") >= avi){ 
         other.slider("value", avi); 
        }else{ 
         other.slider("value", iva); 
        } 
        if(other.slider("value") == ui.value){ 
         var total = 100 - ui.value; 
         other.slider("value", total); 
        } 
        $("#width-r-t").text($("#width-r").slider("value")); 
        $("#width-l-t").text($("#width-l").slider("value")); 
       } 
      }); 
      $("#width-l").slider({ 
       slide: function(event, ui) { 
        var other = $("#width-r"); 
        var avi = 100 - $("#width-l").slider("value"); 
        var iva = 100 - avi; 
        if(other.slider("value") >= avi){ 
         other.slider("value", avi); 
        }else{ 
         other.slider("value", iva); 
        } 
        if(other.slider("value") == ui.value){ 
         var total = 100 - ui.value; 
         other.slider("value", total); 
        } 
        $("#width-r-t").text($("#width-r").slider("value")); 
        $("#width-l-t").text($("#width-l").slider("value")); 
       } 
      }); 

Answer 1

這很簡單。我已經創建了一個JsFiddle的整個響應：http://jsfiddle.net/YstM5/5/。

基本上，你應該使用value場第一初始化滑塊，你必須添加一對線在slide方法：

var max = 100; //maximum value for the two sliders 
var initLeft = 50; //initial value for the left slider 

$("#right").slider({ 
max: max, 
min: 0, 
value: max - initLeft, 
slide: function(event, ui) { 
    $("#left").slider('option','value', max- ui.value);   
} 
//other slide options here ... 
}); 

$("#left").slider({ 
max: max, 
min: 0, 
value: initLeft, 
slide: function(event, ui) { 
    $("#right").slider('option','value', max- ui.value);   
} 
//other slide options here ... 
}); 

它的工作原理！