1

2 つの noUiSlider があり、どちらも 100% に等しい必要があります。したがって、slider1 が 30% から 40% に移動すると、slider2 は自動的に 70% から 60% に移動し、その逆も同様です。

noUiSlider のドキュメントには、2 つのスライダーをリンクして相互に依存して移動するためのcrossUpdateコード例HEREがあります。ただし、この例では、スライダーが同じ方向に移動することを示しています。このコードは今までに見たことがないものなので、数字を動かしてみましたが、スライダーを逆に動かすことはできません。

ここに私のフィドルがあります：http://jsfiddle.net/LukeMcLachlan/0ny6q375/2/

ソリューションが置かれている場所である crossUpdate 関数は次のとおりです。

function crossUpdate ( value, handle, slider ) {
    // If the sliders aren't interlocked, don't
    // cross-update.
    if ( !lockedState ) return;
    // Select whether to increase or decrease
    // the other slider value.
    var lValue = slider1.is(slider) ? 1 : 0,
        hValue = lValue ? 0 : 1;
    // Modify the slider value.
    value -= ( values[hValue] + values[lValue] );
    // Set the value
    $(this).val( value );
}

誰かがこれを解決するのを手伝ってくれるなら、私はとても感謝しています。ありがとう。

4

1 に答える 1

1

答えは、元のフィドルでコードを使用するよりもはるかに簡単なようです。

これは、2 つのスライダーを初期化するために使用するコードです。重要なことはanimate: false、ドキュメントに記載されているように、他のスライダーが移動するときにラグがないようにすることです。

$("#hardwood").noUiSlider({
    start: 100,
    step: 1,
    animate: false,
    connect: 'lower',
    format: wNumb({
        decimals: 0
    }),
    range: {
        'min': 0,
        'max': 100
    }
});
$("#softwood").noUiSlider({
    start: 0,
    step: 1,
    animate: false,
    format: wNumb({
        decimals: 0
    }),
    connect: 'lower',
    range: {
        'min': 0,
        'max': 100
    }
});

移動を行うビットは以下のとおりです。

$("#hardwood").Link('lower').to($("#hardwoodpercent"));
$("#softwood").Link('lower').to($("#softwoodpercent"));
$('#hardwood').on('slide', function(){
    var hardcalc = 100 -  $('#hardwood').val();
    $('#softwood').val(hardcalc);
});
$('#softwood').on('slide', function(){
    var softcalc = 100 -  $('#softwood').val();
    $('#hardwood').val(softcalc);
});
$('#hardwoodpercent').on('change', function(){
    var softcalc = 100 -  $('#hardwoodpercent').val();
    $('#softwood').val(softcalc);
});
$('#softwoodpercent').on('change', function(){
    var softcalc = 100 -  $('#softwoodpercent').val();
    $('#hardwood').val(softcalc);
});

私はコーディングの天才ではありませんが、これは 2 つのスライダーのコンソール エラーなしで動作します。

これを示すようにフィドルを更新しました: http://jsfiddle.net/LukeMcLachlan/0ny6q375/4/。

編集：

ユーザーがスライダーではなく入力フィールドを介して値を変更する可能性があるという事実を考慮して、この回答を編集する必要がありました。

于 2015-07-18T07:58:37.520 に答える