NoUISlider - sticking values to their respective handlers?

Question

I'm working on an e-commerce project that has a price range slider with two handles (min & max price filters). I decided to use NoUiSlider as it comes recommended. Although the plugin has no dependencies, I am also using jQuery 3.2.1, if it all relevant.

How can I make the values "stick" to their respective handlers? The effect I'm looking for is exactly like the slider on this webpage. I scanned through the docs but haven't been able to find anything, the closest thing I could find which I think might be related is this events page.

var handlesSlider = document.getElementById('slider-handles');
var minPrice = document.getElementById('min-price');
var maxPrice = document.getElementById('max-price');
var inputs = [minPrice, maxPrice];

noUiSlider.create(handlesSlider, {
    start: [ 0, 100 ],
    connect: [false, true, false],
    step: 5,
    range: {
        'min': [  0 ],
        'max': [ 100 ]
    },
    format: wNumb({
        decimals: 0,
        thousand: '.',
        prefix: '£',
    }),
});

handlesSlider.noUiSlider.on('update', function( values, handle ) {
    inputs[handle].innerHTML = values[handle];
});

My min-price and max-price are span elements, although I can change them if required.

Are you talking about the values floating above the slider handles? You can use the tooltips option for that: refreshless.com/nouislider/slider-options/#section-tooltips — Lg102

Jisoo Kim Jisoo Kim · Accepted Answer · 2019-11-04T11:55:07

I had a similar problem.

In my case, I wanted to use input boxes (instead of tooltips) to display slider values. This looks similar to your initial implementation using inputs. :)

So I solved it like this:

Create two or more input boxes in HTML (supplemented with proper ids for javascript)

<div id="exampleSlider"></div>
<div> 
  <input id="firstInput">
  <input id="secondInput">
</div>

On Javascript:
- Create a slider (I attached an example here):

  var slider = document.getElementById('exampleSlider');

  noUiSlider.create(slider, {
    // This is an example. Customize this slider to your liking. 
    start: [300, 500],
    range: {
      'min': [0],
      'max': [1000]
    },
    format: wNumb({
      thousand: ',',
      decimals: 0,
      to: function (value) {
        return value + ',-';
      },
      from: function (value) {
        return Number(value.replace(',-', ''));
      }
    }),
});

Code for handling inputs from the slider

var firstInput = document.getElementById('firstInput');
var secondInput = document.getElementById('secondInput');
// add additional variables if you have more than two handles...

slider.noUiSlider.on('update', function (values) {
  var handleValue = slider.noUiSlider.get();

  firstInput.value = handleValue[0]
  secondInput.value = handleValue[1]
  // add additional inputs if you have more than two handles...
});

You can refer to my example code on JSfiddle

NoUISlider - sticking values to their respective handlers?

1 Answers