在相同的页面上使用相同的类的多个平滑滑块？

<div id="slider1" class="slider">
  <span class="value">0</span>
</div>

<div id="slider2" class="slider">
  <span class="value">0</span>
</div>

.slider {
  width: 200px;
  height: 10px;
  background-color: #ccc;
  border-radius: 5px;
}

.value {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #f00;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 30px;
}

// 获取滑块容器和值元素
var slider1 = document.getElementById('slider1');
var value1 = slider1.querySelector('.value');

var slider2 = document.getElementById('slider2');
var value2 = slider2.querySelector('.value');

// 初始化滑块值
var initialValue = 0;
value1.textContent = initialValue;
value2.textContent = initialValue;

// 添加滑块拖动事件监听器
slider1.addEventListener('mousedown', startDrag);
slider2.addEventListener('mousedown', startDrag);

function startDrag(event) {
  var slider = event.target;
  var value = slider.querySelector('.value');
  
  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', stopDrag);
  
  function drag(event) {
    // 更新滑块值
    var newValue = calculateValue(event.clientX);
    value.textContent = newValue;
  }
  
  function stopDrag() {
    document.removeEventListener('mousemove', drag);
    document.removeEventListener('mouseup', stopDrag);
  }
  
  function calculateValue(clientX) {
    // 根据鼠标位置计算滑块值的逻辑
    // ...
  }
}