leongersen / noUiSlider

noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
https://refreshless.com/nouislider/
MIT License
5.7k stars 657 forks source link

Steps not working correctly #1234

Closed MrMooky closed 1 year ago

MrMooky commented 1 year ago

I'm using this library together with wNumb and sometimes the steps are not correctly applied. I defined a step of 250. That essentially works for most numbers, but sometimes is off by 1:

Screenshot 2023-01-02 at 11 18 05

Even if I type 2.500 into the field, it is "corrected" and jumps back to 2.499.

The next step works just fine though:

Screenshot 2023-01-02 at 11 18 25

Like I said, this happens to some values, but not all. Here I should not be able to slide to that value but to 29.250.

Screenshot 2023-01-02 at 11 24 09

This is the current setup:

var rangeSlider = document.getElementById('slider-range');
var inputFormat = document.getElementById('input-format');

noUiSlider.create(rangeSlider, {
    start: [250],
    tooltips: [true],
    step: 250,
    range: {
        'min': [250],
        'max': [{{ $canInvestMax }}]
    },
    format: wNumb({
        thousand: '.',
        suffix: ' EUR'
    })
});

rangeSlider.noUiSlider.on('update', function (values, handle) {
    inputFormat.value = values[handle];
});

inputFormat.addEventListener('change', function () {
    rangeSlider.noUiSlider.set(this.value);
});

And idea how to fix that? Both scripts are up-to-date. Testet with Safari and Chrome on macOS.

MrMooky commented 1 year ago

Just noticed that the wNumb library is the cause for this. I'm going to close this and open a new issue there.

github-actions[bot] commented 1 year ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.