0

我正在尝试制作滑块，最大固定为 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"));
                }
            });
4

1 回答 1

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

有用！

于 2013-04-29T00:13:17.060 回答