web-dev-qa-db-ja.com

最小値または最大値を設定した後にjQuery UIスライダーを更新する方法は？

Ui.sliderがあり、実行時に最小値と最大値を変更します。しかし、これらの変更は、後で値を設定したときにのみビューに反映されます（これにより、不要なイベントが発生します）。私の意見では、最小値と最大値を設定した後もビューを更新する必要があります。簡単な回避策はありますか、スライダーの更新方法が欠落しているようです。

$("#something").slider({
    range: true,
    values: [25, 75],
    min: 0,
    max: 100
});
$("#something").slider("option", "min", 25); // left handle should be at the left end, but it doesn't move
$("#something").slider("option", "values", [25, 75]); // the left handle is now at the left end, but doing this triggers events

編集この問題はjQuery UI 1.9で修正されました

jqueryjquery-uislidermaxmin
25
Manuel Leuenberger

これがjQuery UIスライダーのバグかどうかはわかりませんが、とにかく、現在の値を変更して（技術的には、現在の値を現在の値に設定して...）ビューを強制的に更新することです。 ドキュメント に続いて、これは次のようなことを意味します：

$(function() { 
    var $slide = $("#something").slider({
        range: true,
        values: [25, 75],
        min: 0,
        max: 100
    });
    $slide.slider("option", "min", 25); // left handle should be at the left end, but it doesn't move
    $slide.slider("value", $slide.slider("value")); //force the view refresh, re-setting the current value
});
29
tsimbalar

ハンドルの再配置の問題をクラックしました...この関数を呼び出すだけです。

function resetSlider(){
    $("#slider-fill").attr('value',maxPrice);
    $("input[type='range']").slider( "refresh" );//refresh slider to max value
    $(".ui-slider-handle").css("left","100%");
    console.log("Slider Reset Done.");
}
2
Hardik Thakkar

スライダーの最小値を次のように設定します。

$slide.slider("option", "min", 25);は機能しません。

代わりに$slide.slider("values", "0", 25);を使用しましたが、すべて正常に動作しています。

スライダーの最大値を設定するには、$slide.slider("values", "1", 75);を使用します

値の設定の詳細については、APIドキュメントを参照してください- http://api.jqueryui.com/slider/#option-values

1
Pinte Dani

これを試して。

valPercent = (current_slide_value - min_value) / (max_value - min_value) * 100;     
parentElem.find('.ui-slider-range').css('width', valPercent+'%');    
parentElem.find('.ui-slider-handle').css('left', valPercent+'%');
0
Anand

次のようにjquery関数でhtml divを更新できます

var d='<div class="row grid_slider"><div><p>Grid With time in 24 hour format</p><input type="text" class="range_time24" value="" name="range" /></div></div>';document.getElementById("slider").innerHTML=d;

次に、スライダーに新しい値を設定します

0
Junaid Malik

これを試してください：

$("#Slider2").slider("value", 10, 1000); //10 = min and 1000 = max
0
Pravesh Tiwari

バージョンの問題である可能性がありますが、オプション「min/max」で試したものは何も動作しませんでした。これは問題なく、JQuery UI 1.10でテストされています。この方法では、スライダーまたは数値を使用して、もう一方を変更できます。

$("#mySlider").slider({range: true, min: 0, max: 100, values: [ 0, 100 ], step: 10,
   slide: function( event, ui ) {
      $("#mySliderMin").val( ui.values[ 0 ]);
      $("#mySliderMax").val( ui.values[ 1 ]);
   }
});
$("#mySliderMin").val($("#mySlider").slider( "values", 0 ));
$("#mySliderMax").val($("#mySlider").slider( "values", 1 ));
$("#mySliderMin, #mySliderMax").change(function () {
   $("#mySlider").slider("values", 0, $("#mySliderMin").val());
   $("#mySlider").slider("values", 1, $("#mySliderMax").val());
});
0
Le Droid