Почему округление до целого числа получается с ошибкой js?

Question

[Александра]

Всем привет, делаю ползунок диапазона, нужны только целые числа, периодически при движении ползунка выпадают дробные числа


Вот код

let thumb = slider.querySelector('.thumb');
let thumbVal = document.querySelector('.thumb__val');

let step = 1;
let max = 120;
let min = 0;

let sliderWidth = slider.offsetWidth;
// console.log(sliderWidth);

thumb.style.left = 0 + 'px';
thumbVal.innerHTML = min;

console.log('math ' + Math.round(0.996842105));

thumb.onmousedown = function(e) {
    e.preventDefault(); // предотвратить запуск выделения (действие браузера)

    let shiftX = event.clientX - thumb.getBoundingClientRect().left;

    // console.log('Курсор ' + event.clientX);
    // console.log('Ползунок ' + thumb.getBoundingClientRect().left);
    // console.log('Курсор внутри ползунка ' + shiftX);
    // console.log('Слайдер ' + slider.getBoundingClientRect().left);

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);

    function onMouseMove(event) {
        let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;
        console.log(newLeft);

        // курсор вышел из слайдера => оставить бегунок в его границах.
        if (newLeft < 0) {
            newLeft = 0;
        }

        let rightEdge = slider.offsetWidth - thumb.offsetWidth;

        if (newLeft > rightEdge) {
            newLeft = rightEdge;
        }

        var stepCount = (max - min) / step;
        // console.log('stepCount ' + stepCount);
        var stepSize = (slider.offsetWidth - thumb.offsetWidth) / stepCount;
        // console.log('stepSize ' + stepSize);

        var left = Math.round(newLeft / stepSize) * stepSize;
        console.log('left ' + left);

        thumb.style.left = left + 'px';

        thumbVal.innerHTML = (left / stepSize) * step;

    }

    function onMouseUp() {
        document.removeEventListener('mouseup', onMouseUp);
        document.removeEventListener('mousemove', onMouseMove);
    }

};

thumb.ondragstart = function() {
    return false;
};

Comments

[Lynn «Кофеман»]

> (left / stepSize) * step;

Не вижу округления

Answer 1

[Роман Дворянов]

Поменяйте это

var left = Math.round(newLeft / stepSize) * stepSize;
        console.log('left ' + left);

        thumb.style.left = left + 'px';

        thumbVal.innerHTML = (left / stepSize) * step;

На это

var left = Math.round(newLeft / stepSize) * stepSize;
        console.log('left ' + left);

        thumb.style.left = left + 'px';

        thumbVal.innerHTML = Math.round(left / stepSize) * step;

Comments

[Александра]

Спасибо)

Answer 2

[Aetae]

Ответ на вопрос: потому что используются числа с плавающей точкой.
Если нужно округлённое число - округляйте непосредственно перед использованием\выводом. Любая математическая операция может добавить немного "мусора" при определённых условиях.

Comments

[Александра]

Спасибо за разъяснение