如何動態更改jquery ui滑塊的最小值，最大值？

Question

所以我有一個頁面，上面有一個jquery ui滑塊，用以下內容初始化：

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調用的結果更改最小值，最大值和兩個句柄所在的值。 所以我嘗試過這樣的事情：

    $.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"));

        });

其中我的min和max包含在兩個隱藏的div中，類為start_price和end_price 。 這當前不起作用，它不會更新最高價格，並且滑塊的右手柄出現在左側位置上方。 關於如何使這項工作的任何建議？ 我正在使用php作為后端。 start_price和end_price代碼正常工作。

Answer 1

確保$('.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"));

});

Answer 2

首先銷毀滑塊，完全刪除滑塊功能。 這將使元素返回到其初始化前狀態。

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

這有效。

Answer 3

如果你想在輸入值改變時這樣做，你可以做這樣的事情。

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

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

我打算使用keyup而不是焦點，但是根據你做的內部檢查，你最終可能會多次重建你的滑塊，這不會有什么好處，因為你不會使用它，直到你從輸入繼續。