jquery-ui - jqueryUIスライダーの最小/最大値

Question

jquery uiスライダーのテキストの最小値/最大値を入れて、スクロールして数字を表示することはできますか？次に例を示します。最大値の左側のスライダーには「制限なし」があり、スクロールすると数字が表示されます。

Answer 1

はい、最小-最大を設定できます

$("#slider").slider({
    range: "max",
    min: 0, // min value
    max: 200, // max value
    step: 0.1,
    value: 200, // default value of slider
    slide: function(event, ui) {
        $("#amount").val(ui.value);
    }
});​

Answer 2

あなたは範囲スライダーを探しています。レンジスライダーのデモがお役に立てば幸いです。スライダーの初期化中に最小値と最大値を設定できます。

編集 質問を誤解して申し訳ありません。デモのソースコードを見ると、スライダーの値が変更されたときに要素「#amount」の値を変更する小さなスクリプトが表示されます。

そのスクリプトは次のとおりです。

slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }

これを変更して、文字値を表示できます。

slide: function( event, ui ) {
            if (ui.values[0] == <min_value>) {
                 $( "#amount" ).val( "Min Limit" + " - $" + ui.values[ 1 ] );
            }
        }

要件に応じてこのスクリプトを変更できます

注：私はこれをテストしていません。

Answer 3

最初にスライダーを破壊します。これにより、スライダーの機能が完全に削除されます。これにより、要素が初期化前の状態に戻ります。

$("#selector").slider("destroy");

その後、次のようにスライダーに新しい値を追加できます。

$("#selector").slider({
range: "max",
min: 0, // min value
max: 200, // max value
step: 0.1,
value: 200, // default value of slider
slide: function(event, ui) {
    $("#amount").val(ui.value);
}

}）; </ p>

これは機能します。