滑塊NoUi滑塊值保持范圍

Question

提交表單時，我很難使NoUiSlider范圍滑塊的值保持可見。

因此，人們可以設置范圍，然后點擊提交按鈕。 該范圍滑塊的值可以通過表格很好地提交，但是滑塊的范圍更改為新的設置值。

所以我將范圍設置為例如。 0-500。當有人將范圍設置為例如。 100-400，然后提交表格，范圍將更改為100-400。 因此人們無法將范圍更改回0-500。

所以我的問題是：如何保持范圍不變（所以0 -500），但是將手柄移到設置值（所以100-400）呢？

所以我有這個：

  <form>
    <input type="hidden" name="max" value="0" id="filter_form_max" />
    <input type="hidden" name="min" value="500" id="filter_form_min" />

     <div id="slider-handles"></div>

    <input type="submit" class="price-btn" />{{ 'Set price' | t }}
  </form>

和JS：

$(function() {


 var handlesSlider = document.getElementById('slider-handles');

  noUiSlider.create(handlesSlider, {
    start: [ 0, 500 ],
    format: wNumb({
        decimals:0,
        thousand: '.'
    }),
    range: {
        'min': [ 0 ],
        'max': [ 500 ]
    },
    tooltips: true,
  });
  handlesSlider.noUiSlider.on('update', function( values, handle ) {
    var minVal = document.getElementById('filter_form_min');
    var maxVal = document.getElementById('filter_form_max');
      minVal.value = values[0]
      maxVal.value = values[1]
  });


 });

Answer 1

您只需要更改開始數組的值即可。 嘗試更改以下內容。 它為我工作。

//---- some code ---
  noUiSlider.create(handlesSlider, {
    start: [ 100, 400 ],
//-----