web-dev-qa-db-ja.com

jquery uiスライダーの最小値と最大値を動的に変更するにはどうすればよいですか？

したがって、jqueryuiスライダーが次のように初期化されたページがあります。

var min = $("#attrInformation").data("lowest_price"),
max = $("#attrInformation").data("highest_price");

    $( "#slider-range" ).slider({
        range: true,
        min: min,
        max: max,
        values: [ min, max ],
        slide: function( event, ui ) {
            var start = ui.values[0],
            end = ui.values[1];

            $("#startPrice").text(start);
            $("#endPrice").text(end);
        },
        stop: function(event,ui){
            var start = ui.values[0],
            end = ui.values[1];

            refineObject.price_min = start;
            refineObject.price_max = end;

            refineResults(refineObject);
        }
    });

そして、ajax呼び出しの結果に基づいて、最小値、最大値、および2つのハンドルの基になる値を変更できるようにしたいです。だから私はこのようなことを試しました：

    $.get("ajax.php",options,function(data){
    $('.middle_container').html(data);          

    $('#slider-range').slider( "option", "min", $('.middle_container').find('.start_price').val() );
    $('#slider-range').slider( "option", "max", $('.middle_container').find('.end_price').val() );
    $('#slider-range').slider("value", $('#slider-range').slider("value"));

        });

ここで、私の最小値と最大値は、クラスstart_priceとend_priceの2つの非表示のdivに含まれています。これは現在機能せず、最大価格を更新せず、スライダーの右ハンドルが左側の位置から外れて表示されます。これを機能させる方法について何か提案はありますか？私はバックエンドにphpを使用しています。 start_priceコードとend_priceコードは機能しており、正しいです。

phpjavascriptjqueryjquery-uislider
11
Evan

$('.middle_container').find('.start_price').val()と$('.middle_container').find('.end_price').val()が適切な値を返していることを確認してください。また、スライダーの値を設定するには、最小/最大値の設定に使用しているのと同じ構文を使用する必要があります。また

これを試して

$.get("ajax.php",options,function(data){
    $('.middle_container').html(data);          

    $('#slider-range').slider( "option", "min", $('.middle_container').find('.start_price').val() );
    $('#slider-range').slider( "option", "max", $('.middle_container').find('.end_price').val() );
    $('#slider-range').slider( "option", "value", $('#slider-range').slider("value"));

});
11
ShankarSangoli

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

$("#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);
    }
});​

これは機能します。

3
Shailesh Kalamkar

入力値の変更に対してこれを実行する場合は、次のようにすることができます。

$('#inputid').focusout(function() {

    // slider destroy and create as Shailesh showed
});

フォーカスの代わりにキーアップを使用するつもりでしたが、内部チェックによっては、スライダーを何度も再構築する可能性があり、入力から移動するまで使用しないため、メリットはありません。

0
Chris