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

所以我有上有一個jQuery UI的滑塊與下面的初始化頁面：如何動態更改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")); 

     });

在我的最大值和最小值都包含在兩個隱藏的div類start_price和end_price。這目前不起作用，它不會更新最大價格，並且滑塊的右手柄出現在左側的位置。有關如何使這項工作的任何建議？我使用php作爲後端。 start_price和end_price代碼正在運行並且正確。

來源

2012-01-09 Evan

你可以發佈你的HTML嗎？ – Blazemonger 2012-01-09 21:31:30

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

});

來源

2012-01-09 21:33:12 ShankarSangoli

我如何分別訪問每個值？因爲這是一個範圍，所以有兩個句柄 – Evan 2012-01-09 21:40:51

摧毀滑塊第一，可以完全消除滑塊功能。這會將元素返回到其初始狀態。

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

這工作。

來源

2013-08-09 07:13:44

如果你想對輸入值進行更改，你可以這樣做。

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

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

我要好好運用，而不是重點KEYUP，但是這取決於你做了內部檢查，你可能最終會重建你的滑塊很多時間，這會不會是因爲你不會使用它，直到你感動的相關利益從輸入。

來源

2016-06-10 21:31:18 Chris

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

回答

相關問題