多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 ... 
}); 

它的工作原理！