Search code examples
javascripthtmlcssnouislider

noUiSlider(Using the steps API) + wNumb - wNumb formating doesnt work for the first tooltip


I'm stuck.. I want to create multiple range sliders with noUiSlider. Each slider has to handle between to values (min=2600000, max=8500000,). I format the number using a wNumb, but formatting only works on the second tooltip (1st is ignoring).

See my current code here:

HTML

<div id="steps-slider"></div>

JS

var stepsSlider = document.getElementById('steps-slider');
var input0 = document.getElementById('input-with-keypress-0');
var input1 = document.getElementById('input-with-keypress-1');
var inputs = [input0, input1];

var moneyFormat = wNumb({
    decimals: 0,
    thousand: ' ',
});

noUiSlider.create(stepsSlider, {
  start: [2650000, 8500000],
  connect: true,
  tooltips: [true, moneyFormat],
  range: {
      'min': 2650000,
      'max': 8500000
});

Now What i want


Solution

  • You are passing true for the first tooltip, instead of a formatter. That'll provide a tooltip with the default slider formatting. To use your formatter for both tooltips, use tooltips: [moneyFormat, moneyFormat].