На основе слайдера из задачи Слайдер создайте графический компонент, который умеет возвращать/получать значение.
Синтаксис:
var slider = new Slider({
elem: document.getElementById('slider'),
max: 100 // слайдер на самой правой позиции соответствует 100
});
Метод setValue устанавливает значение:
slider.setValue(50);
У слайдера должно быть два события: slide при каждом передвижении и change при отпускании мыши (установке значения).
Пример использования:
slider.on("slide", function(value) {
document.getElementById('slide').innerHTML = value;
});
slider.on("change", function(value) {
document.getElementById('change').innerHTML = value;
});
В действии:
- Дизайн слайдера, ширина/высота элементов должна быть изменяемой через CSS, без необходимости трогать JS-код.
- Центр бегунка должен располагаться над значением. Например, он должен быть в центре для 50 при максимуме 100.
Исходный документ — работающий слайдер из задачи Слайдер : tutorial/browser/events/slider-src/index.html.
Как сопоставить позицию слайдера и значение?
Для этого посмотрим крайние значения слайдера. Допустим, размер бегунка 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);
Итоговое решение: tutorial/browser/events/slider/index.html.