滑塊NoUiSlider值保持範圍

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 ], 
//-----