Не корректное изменение input range

Question

Я создаю input с типом range.

slider           = document.createElement('input');
slider.type      = 'range';
slider.min       = 0.25;
slider.max       = 2.5;
slider.step      = 0.05;
slider.value     = playbackSpeed; // переменная хранит 1.5
slider.className = 'sliderSpeed';

Дальше на него вешаю прослушиватели:

slider.addEventListener('wheel', (e) =>
{
    console.log(e.deltaY, Math.sign(e.deltaY));

    if (Math.sign(e.deltaY) == 1)
    {
        console.log(slider.value, '-=', slider.step);
        slider.value -= slider.step;
    }
    else
    {
        console.log(slider.value, '+=', slider.step);
        slider.value += slider.step;
    }

    slider.dispatchEvent(new Event('input', { bubbles: true }));

    e.preventDefault();
});

slider.addEventListener('input', (e) =>
{
    video.playbackRate = parseFloat(e.target.value);
});

То есть при прокрутке колесика вниз, мы отнимаем от value, шаг. Это работает. Но почему-то при прокрутке вверх, value устанавливается в 1.4, всегда.

slider           = document.createElement('input');
slider.type      = 'range';
slider.min       = 0.25;
slider.max       = 2.5;
slider.step      = 0.05;
slider.value     = 1.5; // переменная хранит 1.5
slider.className = 'sliderSpeed';
document.body.append(slider);

slider.addEventListener('wheel', (e) =>
{
    console.log(e.deltaY, Math.sign(e.deltaY));

    if (Math.sign(e.deltaY) == 1)
    {
        console.log(slider.value, '-=', slider.step);
        slider.value -= slider.step;
        console.log('new value', slider.value);
    }
    else
    {
        console.log(slider.value, '+=', slider.step);
        slider.value += slider.step;
        console.log('new value', slider.value);
    }

    slider.dispatchEvent(new Event('input', { bubbles: true }));

    e.preventDefault();
});

//slider.addEventListener('input', (e) =>
//{
//  video.playbackRate = parseFloat(e.target.value);
//});

Кхм.. Решением проблемы оказалось parseFloat для value и step. Догадывался что где-то здесь зарыто..

Answer 1

Дело оказалось в типах данных. slider.value хранит строку, как и slider.step, по этому += просто складывало строки.

Так же в комментариях подсказал @teran, что конструкцию с if ... else можно сократить до:

slider.value = value - sign * step;

(В данном случае минус, ибо при скроле вниз, число положительно, на что Math.sign возвращает положительно число, но по логике нам нужно отнимать при скроле вниз.)

Итого:

slider.addEventListener('wheel', (e) =>
{
    const value = parseFloat(slider.value);
    const step = parseFloat(slider.step);
    const sign = Math.sign(e.deltaY);

    slider.value = value - sign * step;

    slider.dispatchEvent(new Event('input', { bubbles: true }));

    e.preventDefault();
});

БЛОГ НА HUSL

Не корректное изменение input range

Ответы (1 шт):