Question

我设法创建了一个有点工作的滑块控件，但感觉有点不对劲。它不像普通控制那样表现得很好。有时滑动时它会卡住，你可能想亲眼看看。

如何创建滑块以使其平滑滑动而不会中断，或者用户是否需要将光标准确地放在红色轨道上？

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

以下是滑块的固定版本。

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>

创建纯javascript范围滑块控件

1 个答案: