拖动时如何停止滑块的更新值？

// 获取滑块元素
const slider = document.getElementById('slider');

// 定义滑块值的变量
let sliderValue = 0;

// 定义滑块拖动状态的变量
let isDragging = false;

// 监听滑块的拖动开始事件
slider.addEventListener('mousedown', startDragging);
slider.addEventListener('touchstart', startDragging);

function startDragging(event) {
  // 阻止默认事件，避免拖动滑块时触发其他操作
  event.preventDefault();

  // 设置拖动状态为true
  isDragging = true;

  // 添加事件监听器，实时更新滑块的值
  document.addEventListener('mousemove', updateSliderValue);
  document.addEventListener('touchmove', updateSliderValue);
}

// 监听滑块的拖动结束事件
document.addEventListener('mouseup', stopDragging);
document.addEventListener('touchend', stopDragging);

function stopDragging() {
  // 设置拖动状态为false
  isDragging = false;

  // 移除事件监听器，停止更新滑块的值
  document.removeEventListener('mousemove', updateSliderValue);
  document.removeEventListener('touchmove', updateSliderValue);
}

// 更新滑块的值
function updateSliderValue(event) {
  // 判断是否处于拖动状态
  if (isDragging) {
    // 更新滑块的值
    // 这里可以根据具体需求来更新滑块的值，例如根据鼠标位置或触摸位置计算新的值
    // 示例中直接使用了一个随机值来模拟更新
    sliderValue = Math.random();

    // 在控制台输出滑块的值
    console.log('Slider value:', sliderValue);
  }
}