title: Why do both elements move when one is dragged with this function?
body: <p>I am trying to make a range slider with 2 draggable handles. It's still in the early stages and at this point I'm trying to just get the two handles moving independently when dragged.</p>
  
  <p>However the problem I'm getting is if I bind the event handlers to <code>document</code> both handles move together when one is dragged. If I bind to the element passed in through the selector argument (the handle itself) then both handles move independently, but then only work when the mouse pointer is within the confines of that element which is not a nice behavior.</p>
  
  <p>Here's my code. What am I doing wrong?</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>function draggable(selector, options) {
    var options = options || {};
    let el = document.querySelector(selector);
    var mx = 0,
      my = 0;
    var dragging = false;
    var offset = [0, 0];
    var constrain = options.constrain || false;
    if (options === undefined) options = [];
  
    document.addEventListener('mousedown', function(e) {
      dragging = true;
      offset = {
        x: el.offsetLeft - e.clientX,
        y: el.offsetTop - e.clientY
      };
    });
    document.addEventListener('mousemove', function(e) {
      e.preventDefault();
      mx = e.clientX;
      my = e.clientY;
  
      if (dragging) {
        if (!constrain || constrain == 'x') el.style.left = (mx + offset.x) + 'px';
        if (!constrain || constrain == 'y') el.style.top = (my + offset.y) + 'px';
      }
    });
    document.addEventListener('mouseup', function(e) {
      dragging = false;
    });
  }
  var min = new draggable('#min', {
    constrain: 'x'
  });
  var max = new draggable('#max', {
    constrain: 'x'
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 50px;
  }
  
  .range-input {
    height: 24px;
    position: relative;
  }
  
  .rail {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 9px;
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    height: 9px;
    width: 100%;
  }
  
  .handle {
    background: #000;
    border-radius: 50%;
    height: 24px;
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0) scale(1);
    width: 24px;
  }
  
  .handle:hover {
    cursor: grab;
    transform: translate3d(0, -50%, 0) scale(1.2);
  }
  
  .handle:active {
    cursor: grabbing;
  }
  
  .min {
    left: 0;
  }
  
  .max {
    right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrap" class="range-input"&gt;
    &lt;div class="rail"&gt;&lt;/div&gt;
    &lt;div id="min" class="handle min"&gt;&lt;/div&gt;
    &lt;div id="max" class="handle max"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>