Делаю слайдер, но столкнулся с проблемами и прошу помощи в решении.
1. когда нажимаешь на ползунок, перемещаешь его в одну из сторон и выходишь за поля элемента слайдера(но при этом не отпуская зажатую кнопку), а потом отпускаешь его, то он всё равно продолжает следовать за мышью(в разрешённых пределах). Хотя, событие onmouseup должно было бы прекратить движение ползулка.. Как это исправить?
2. хочу, чтобы при перемещении ползунка показывалось на сколько процентов от продвинулся от своего начального состояния до конечного. И всё в роде бы норм, да только вот когда ползунок доводишь до максимума, то показываются не все 100%, а 93%. Это происходит из-за выставленного условия "if(draggerLeft < 0 || draggerLeft > scale.offsetWidth
- dragger.offsetWidth)", но если это условие изменить на "if(draggerLeft < 0 || draggerLeft > scale.offsetWidth)", то считается всё нормально, но если ползунок довести на максимум, то он на длину dragger.offsetWidth выходит за пределы "шкалы".
Сам код слайдера
function slider() {
var source = document.getElementById('slider');
var scale = document.createElement('div');
scale.setAttribute('class', 'scaleClass');
source.appendChild(scale);
scale.style.width = '200px';
scale.style.height = '10px';
scale.style.backgroundColor = '#ddd';
sCoords = getCoords(scale);
var dragger = document.createElement('div');
dragger.setAttribute('class', 'draggerClass');
dragger.style.position = 'relative';
scale.appendChild(dragger);
dragger.style.width = '11px';
dragger.style.height = '11px';
dragger.style.border = '1px solid black';
dragger.style.borderRadius = '10px';
dragger.style.backgroundColor = 'silver';
dragger.onmousedown = function(e) {
e = getEvent(e);
var coords = getCoords(dragger);
var shiftX = e.pageX - coords.left;
document.onmousemove = function(e) {
draggerLeft = e.pageX - shiftX - sCoords.left;
if(draggerLeft < 0 || draggerLeft > scale.offsetWidth - dragger.offsetWidth)
return;
dragger.style.left = draggerLeft + 'px';
document.getElementById('result').innerHTML = parseInt(draggerLeft / scale.offsetWidth * 100) + '%';
};
};
dragger.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
};
dragger.ondragstart = function() { return false; };
}
