Creating a pure javascript range slider control
<p>I managed to create  a somewhat working slider control but something feels kind of off. It doesnt quite behave as a normal control should. Sometimes while sliding it gets stuck and well, you might want to see for yourself.</p>

<p>How would you create the slider so that it slides smoothly without interruption or the user needing the cursor exactly on the red track?</p>

<pre><code>function createRange(e) {
    var range = (((e.offsetX - 0) * (255 - 0)) / (200-40 - 0)) + 0;
  var rounded = Math.round(range);

  return rounded;
}

function colorSlider(e) {
    createRange(e)
}

var dragging = false;

document.getElementById("knob").addEventListener('mousedown', function(e) {
    dragging = true;
  e.target.style.pointerEvents = "none"
})

window.addEventListener('mousemove', function(e) {
  if (dragging) {
    if (createRange(e) &lt;= 255) {
      document.getElementById("knob").style.left =  e.offsetX + "px"
    }
  }
})
</code></pre>