title: fire the div mousemove while on document
body: <p>Im having a slider that increases width when click-hold and moved.</p>
  
  <p>But as soon as im getting  my mouse outside of the slider it doesn't runs anymore.</p>
  
  <p>How can i make it also run when im moving my mouse outside the <code>slider-container</code> ? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var classname = document.getElementsByClassName("slider-container");
  
  const offset = function(el){
   var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
   return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
  };
  var mymousemove = function(e) {
      var x = e.pageX; 
      var sliderC = e.currentTarget;
      if(parseInt(sliderC.getAttribute("isMousedown")) == 1){   
        var width = e.pageX - offset(sliderC).left;
        sliderC.querySelector('.slider').style.width = width+'px';
      }
  };
  var mymousedown = function(e) {
     var sliderC = e.currentTarget;
     sliderC.setAttribute("isMousedown",1);
  }
  var mymouseup = function(e) {
     var sliderC = e.currentTarget;
     sliderC.setAttribute("isMousedown",0);
  }
  
  for (var i = 0; i &lt; classname.length; i++) {
      classname[i].addEventListener('mousemove',mymousemove, false);
      classname[i].addEventListener('mousedown',mymousedown, false);
      classname[i].addEventListener('mouseup',mymouseup, false);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    user-select: none;
  }
  .slider-container{
    width:200px;
    border:4px solid black;
    height:100px;
    display: inline-block;
    margin: 10px;
  }
  .slider{
    width:0;
    background:#f00;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slider-container"&gt;
  &lt;div class="slider"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="slider-container"&gt;
  &lt;div class="slider"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;h1&gt;ALSO moving mouse here while mousedown should move them sliders . nam sayin ?&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/d8pqjb5t/3/" rel="nofollow noreferrer">https://jsfiddle.net/d8pqjb5t/3/</a></p>