如何在擦除条中创建可拖动手柄(div)

<div id="eraser-bar"></div>

<div id="handle"></div>

#handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #000;
  cursor: move;
}

var handle = document.getElementById('handle');
var eraserBar = document.getElementById('eraser-bar');
var isDragging = false;

handle.addEventListener('mousedown', function(e) {
  isDragging = true;
});

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    var x = e.clientX;
    var eraserBarWidth = eraserBar.offsetWidth;
    var handleWidth = handle.offsetWidth;
    var maxLeft = eraserBarWidth - handleWidth;
    var left = Math.min(Math.max(x - eraserBar.offsetLeft - handleWidth / 2, 0), maxLeft);
    handle.style.left = left + 'px';
  }
});

document.addEventListener('mouseup', function(e) {
  isDragging = false;
});