0

最大100に固定されたスライダーを作成しようとしています。

したがって、#slider_1が 72 に上昇すると、自動的に 28 になります。スクリプトは、と#slider_2の幅を設定するためのものです。#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に 1 組の行を追加する必要があります。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 に答える