1.7 KiB
Как сопоставить позицию слайдера и значение?
Для этого посмотрим крайние значения слайдера. Допустим, размер бегунка 10px.
Раз центр соответствует значению, то крайнее левое значение будет соответствовать центру на 5px, а крайнее правой -- центру на 5px от правой границы:
Соответственно, ширина области изменения будет sliderElem.clientWidth - thumbElem.clientWidth. Далее её можно уже поделить на части, количество пикселей на значение будет:
pixelsPerValue = (sliderElem.clientWidth-thumbElem.clientWidth) / max;
Может получиться так, что это значение будет дробным, меньше единицы. Например, если max = 1000, а ширина слайдера 110 (пробег 100), то будет 0.1 пикселя на значение.
Используя pixelsPerValue мы сможем переводить позицию бегунка в значение и обратно.
Крайнее левое значение thumbElem.style.left равно нулю, крайнее правой -- как раз ширине доступной области sliderElem.clientWidth - thumbElem.clientWidth. Поэтому можно получив значение, поделив его на pixelsPerValue:
value = Math.round( newLeft / pixelsPerValue);