多个具有固定值的 jQuery 滑块

Posted 2023-05-08

【中文标题】多个具有固定值的 jQuery 滑块

【英文标题】：Multiple jQuery sliders with fixed value

【发布时间】：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"));
                
            );

【参考方案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 ...
);

有效！