How to write a slider without sticking the cursor to the slider?

Question

JavaScript

I have some code that works just fine. But there is one detail I can't figure out. Why, when moving the slider with the mouse button held down and releasing the button outside the slider block, the slider continues to move as if the button was not released. When you click on the slider, everything returns to normal. I would like a detailed answer...

"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
  };
}

Thanks in advance!

Answer 1

for some reason, you are trying to track clicks on the slider manually, and even in the handler for hovering the mouse over it.
here you have in this place the exit handler from the slider demolishes the button release handler that puts the slider.
replace the slider.onmouseenter block with something like

slider.onclick = function(e){
  /* Отследить клик на слайдере*/
  if(e.target === slider){
    let thumbCoords = getCoords(thumb);
    let shiftX = e.pageX - thumbCoords.left;
    let sliderCoords = getCoords(slider);
    nLeft(e, thumbCoords, shiftX, sliderCoords,"click");
    return false;
  }
}