5

ドキュメントで説明されているように、最小値が20に固定されたjQueryスライダーを使用しています。

しかし、それは私が必要としているものではありません。スライダーの視覚範囲を0〜100にしたいのですが、ユーザーがスライダーを20未満に動かしてはいけません。

つまり、スライダーのハンドルは、スライダーの左側に完全に移動することはできませんが（現時点ではそうなっています）、0〜20の範囲を表示する必要があります。

これが私が何を意味するかを示すJSFiddleであり、現在のコードは次のとおりです。

$("#range-slider").slider({
    range: "min",
    min: 20,
    max: 100, 
    value: 20,
    step: 20,
});

何か案は？

4

1 に答える 1

8

スライド機能を使用して、それを強制する必要があります

$(document).ready(function() {

    // I want the visual range to be 0-100, 
    // but the minimum allowed value to be 20 - 
    // so in other words, the handle never gets
    // all the way to the LHS of the slider, 
    // but shows the range 0-20. 
    // Is this possible? 
    $("#range-slider").slider({
        range: "min",
        min: 0,
        max: 100,
        value: 20,
        step: 20,
        slide: function(event, ui) {
            if (ui.value < 20) {
                return false;
            }
        }
    });

});

http://jsfiddle.net/nicolapeluchetti/kGtsN/17/

ドキュメントから

滑り台

このイベントは、スライド中にマウスを動かすたびにトリガーされます。ui.value（シングルハンドルスライダー）を使用して現在のハンドルの値を取得し、$（..）。slider（'value'、index）を使用して別のハンドルの値を取得します。

ui.valueに基づいて、スライドを防ぐためにfalseを返します。

于 2012-07-18T16:30:00.117 に答える