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.

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

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) <= 255) {
      document.getElementById("knob").style.left =  e.offsetX + "px"
    }
  }
})

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.

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

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) <= 255) {
      document.getElementById("knob").style.left =  e.offsetX + "px"
    }
  }
})

• javascript

• wouldn't you need a mouseup event listener that sets dragging to false when the mouse is released? – Punit Commented Dec 9, 2016 at 21:12
• Why not use <input type="range">? – user663031 Commented Dec 10, 2016 at 12:32
• @torazaburo too easy and too much css and prefixes to customize the design – Asperger Commented Dec 10, 2016 at 12:34
• 1 That's the first time I can recall some solution being criticized for being "too easy". Anyway, to style your slider, you're also going to need CSS. – user663031 Commented Dec 10, 2016 at 12:48
• @torazaburo ya, right now its really ugly for testing purposes hehe. I have used the html5 slider before. It can be also styled, every part of it but the amount of css required is crazy. Also with javascript you can apply cool plex easing effects and customize the entire thing like crazy – Asperger Commented Dec 10, 2016 at 12:57

1 Answer 1

Here is a fixed version of your slider.

var dragging = false;
var knobOffset = 0;

var track = document.getElementById('track'),
    knob = document.getElementById('knob'),

    trackWidth = track.offsetWidth,
    trackLeft = track.offsetLeft,
    trackRight = trackLeft + trackWidth,

    knobWidth = knob.offsetWidth,
    maxRight = trackWidth - knobWidth; // relatively to track

knob.addEventListener('mousedown', function(e) {
    // knob offset relatively to track
    knobOffset = e.clientX - knob.offsetLeft;
    dragging = true;
});

window.addEventListener('mouseup', function(e) {
    dragging = false;
})

window.addEventListener('mousemove', function(e) {
  if (dragging) {
      // current knob offset, relative to track
      var offset = e.clientX - trackLeft - knobOffset;
      if(offset < 0) {
        var offset = 0;
      } else if(offset > maxRight) {
        var offset = maxRight;
      }
        
      knob.style.left = offset + "px"
  }
});

#track {width: 200px;height: 5px; margin:100px; background: red}
#knob {height: 10px; width: 40px; background: black;position: relative; }

<div id='track'>
  <div id="knob"></div>
</div>