我无法保留范围 slider NoUiSlider 中的值提交表单时可见。
因此人们可以设置一个范围,然后点击提交按钮。该范围 slider 中的值可以很好地通过表单提交,但是 slider 的范围会更改为新的设置值。
所以我将范围设置为例如。 0 - 500。当有人将范围设置为例如时。 100-400,然后提交表格,范围将更改为 100-400。因此人们无法将范围改回 0 - 500。
所以我的问题是: 如何保持范围不变(例如 0 -500),但将 handle 移动到设定值(例如 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]
});
});
最佳答案
您只需更改起始数组的值即可。 尝试用以下方法改变它们。它对我有用。
//---- some code ---
noUiSlider.create(handlesSlider, {
start: [ 100, 400 ],
//-----
关于javascript - slider NoUiSlider 值保持范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42230350/