2.1 KiB
Для решения этой задачи достаточно создать две функции: valueToPosition будет получать по значению положение бегунка, а positionToValue -- наоборот, транслировать текущую координату бегунка в значение.
Как сопоставить позицию слайдера и значение?
Для этого посмотрим крайние значения слайдера. Допустим, размер бегунка 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:
function positionToValue(left) {
return Math.round( left / pixelsPerValue);
}
function valueToPosition(value) {
return pixelsPerValue * value;
}