CODEWITHSUNDEEP
javascriptjquerynouislider
Meules
Meules

Reputation: 1389

Slider NoUiSlider value keep range

I'm having troubles to keep the values from a range slider of NoUiSlider visible when submitting a form.

So people can set a range and then hit a submit button. The values from that range slider are nicely submitted via the form however the range of the slider changes to the new set value.

So I have set the range to eg. 0 - 500. When somebody sets the range to eg. 100-400 and then submit the form then the range changes to 100-400. So people can't change the range back to 0 - 500.

So my question: How can I keep the range as is(so 0 -500) but move the handles to the set values (so 100 - 400)?

So what I have is this:

  <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>

And 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]
  });


 });

Upvotes: 0

Views: 1218

Answers (1)

Jimish Fotariya
Jimish Fotariya

Reputation: 1097

You just need to change values of start array. Try to change those with following. It worked for me.

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

Upvotes: 2

Related Questions