Есть код который вполне работает. Но с одной деталью я разобраться никак не могу. Почему при передвижении ползунка зажатой кнопкой мыши и отпускании кнопки вне блока слайдера, слайдер продолжает движение так как будто кнопку не отпускали. При щелчке на слайдере всё приходит в норму. Хотелось бы ответ развёрнутый с деталями...
"use strict"
var gBubble = document.getElementById('growingBubble');
var slider = document.getElementById('slider');
var thumb = slider.children[0];
growingBubble();
slider.onmouseenter = function(e){
/* Отследить клик на слайдере*/
document.onmousedown = function(e){
let thumbCoords = getCoords(thumb);
let shiftX = e.pageX - thumbCoords.left;
let sliderCoords = getCoords(slider);
if(e.target === slider){
document.onmouseup = function(e){
nLeft(e, thumbCoords, shiftX, sliderCoords,"click");
}
}
return false;
}
slider.onmouseleave = function(e){
document.onmouseup = null;
}
}
/*Отслеживание ползунка*/
thumb.onmousedown = function(e){
let thumbCoords = getCoords(thumb); // Координаты ползунка
let shiftX = e.pageX - thumbCoords.left;//Слайдер двигается только по горизонтали. shiftY не нужен.
let sliderCoords = getCoords(slider);// Координаты слайдера
document.onmousemove = function(e){
nLeft(e, thumbCoords,
shiftX, sliderCoords, "move");
}
document.onmouseup = function(){
document.onmousemove = document.onmousedown = null;
};
return false;
};
thumb.ondragstart = function(){
return false;
}
/* Отслеживание ползунка*/
function nLeft(e, thumbCoords, shiftX, sliderCoords, md){
let newLeft;
if(md === "move"){
newLeft = e.pageX - shiftX - sliderCoords.left;
}else if(md === "click"){
newLeft = e.pageX - sliderCoords.left + thumb.style.width;
}
/*Ползунок вышел за левую границу поля*/
if(newLeft<0){
newLeft=0;
}
/*Ползунок вышел за правую границу поля*/
let rightEdge = slider.offsetWidth - thumb.offsetWidth;// Координата Х крайнего правого положения ползунка
if(newLeft>rightEdge){
newLeft=rightEdge;
}
thumb.style.left = newLeft + "px";
growingBubble(newLeft);
};
/* Изменение пузыря*/
function growingBubble(v = 20){
thumb.style.left = v + "px";
setTimeout(function(){
gBubble.style.width = gBubble.style.height = v + "px";
},1000);
}
/*Получение координат элемента*/
function getCoords(elem){
var box = elem.getBoundingClientRect();
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
};
}
Заранее благодарен!
