javascript - 创建一个纯 javascript 范围 slider 控件

Question

我设法创建了一个可以正常工作的 slider 控件，但感觉有些不对劲。它的行为并不像正常控件那样。有时在滑动时它会卡住并且很好，您可能想亲眼看看。

您将如何创建 slider 以使其平滑滑动而不会中断或用户需要光标恰好位于红色轨道上？

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

Answer 1

这是 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>