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