noUiSlider long number rounding error

Question

I initialize noUiSlider with data

var settings = {
  connect: "lower",
  range: {
    max: 87654567890,
    min: 0
  },
  start: 30679098762,
  step: 1
}

after initialization slider value is 30679098761.50 why?

Demo here - https://jsfiddle.net/serGlazkov/yrppsmvo/5/

Desmarais

I think It's because, move slide by 1 px will increase value by (87654567890/length slider in px) and when you chose that value it's take closer value – Radiancy

@AlexandrKudryashov i think it's not normal, have some ways to fix it? – Desmarais

Answer 1

this is a bug noUiSlider, fixed in 8.4.0 version

Desmarais

Answer 2

Numbers that large cannot be accurately represented on the sliders width (say 300px can't reasonably be divided by 87654567890).

The solution is using a small number range, and doing a looking in an array to find the large value:

var range = ['x','x2','x3',...];

bigValueSlider.noUiSlider.on('update', function ( values, handle ) {
    bigValueSpan.innerHTML = range[values[handle]];
});

Have a look at this example in the documentation of how to deal with it.

Eyesore

On initialization i set a integer value and why slider change it? I know what slider change value, because translate value to percent and back, and it not bad, but not on initialization. And more, i can't set value, plugin change it. Demo here jsfiddle.net/serGlazkov/yrppsmvo/8 – Desmarais