多个具有固定值的 jQuery 滑块答案

【问题标题】：Multiple jQuery sliders with fixed value多个具有固定值的 jQuery 滑块
【发布时间】：2013-04-22 12:10:46
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html jquery-ui jquery-selectors

【解决方案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 ...
});

有效！

【讨论】：