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

有效！

多个具有固定值的jQuery滑块

1 个答案: