Как изменить шаг Drag’n’Drop при mousedown?

Question

[Анатолий]

Подскажите, пожалуйста, как в примере изменить то на сколько пикселей перемещается ползунок при его перетаскивании?

Comments

[ksnk]

А в чем проблема ? Этот код всего лишь отрисовывает элемент. То, на сколько пикселей перемещается бегунок определяется мышкой.
Все что можно поменять - это относительный "шаг" одного пикселя. Весь размер элемента
0..rightEdge. Текущее состояние элемента newLeft . Задача на пропорции ?

[Анатолий]

ksnk, Да, вся ширина на которой помещен бегунок поделена на 10 частей нужно чтобы бегунок перемещался на 1 шаг при получении свойства .offsetWidth я получаю при каждом сдвиге параметры в пикселях.

[ksnk]

Анатолий, https://codepen.io/ksnk/pen/MWPbZPd
Из изменений - заведена переменная max,

let thumb = slider.querySelector('.thumb'),
    max=5 // till 0 to max
    ;

...
        if (newLeft > rightEdge) {
          newLeft = rightEdge;
        }
        let step=Math.round(rightEdge/max), // шаг
            value=Math.round(newLeft/step);  // значение скроллера
        thumb.style.left = (step*value) + 'px'; // смещение бегунка скроллера
      }
...

[Анатолий]

ksnk, спасибо, то что нужно.

Answer 1

[Алексей]

Изначальная проблема в том, что вы делаете range slider не стандартными способами, когда есть стандартный input с type="range"
например,

<input type="range" min="1" max="100" value="0" step="10">

далее стилизуете его по вашему желанию, указываете шаг/step нужный вам и отлавливаете onchange событие

Comments

[Анатолий]

Я выбрал этот способ реализации потому, что там не простая стилизация требуется. От толосы прогресса до разметки как у линейки. При этом адаптивно должно быть.

[Алексей]

Анатолий, не понимаю в чем проблема, вы можете стилизовать его так, как вам нужно, если что наложить сверху/снизу любой стилизованный блок и т.д. Даже примеры в виде линейки легко находятся

[Анатолий]

Алексей, спасибо, почему то я не подумал об этом )