CSS jQuery -将项目符号作为我的滑块中的指示器

<div class="slider-container">
  <!-- 滑块内容 -->
</div>

.slider-container {
  width: 200px;
  height: 20px;
  background-color: #ccc;
}

<div class="slider-container">
  <span class="indicator"></span>
</div>

.indicator {
  width: 20px;
  height: 20px;
  background-color: #f00;
}

$(document).ready(function() {
  $('.slider-container').on('mousedown touchstart', function(e) {
    // 获取滑块容器的宽度
    var containerWidth = $(this).width();
    
    // 获取鼠标点击或触摸的位置
    var startX = e.pageX || e.originalEvent.touches[0].pageX;
    
    // 监听鼠标移动或触摸移动事件
    $(document).on('mousemove touchmove', function(e) {
      // 计算滑块指示器的位置
      var moveX = (e.pageX || e.originalEvent.touches[0].pageX) - startX;
      var indicatorLeft = Math.min(Math.max(0, moveX), containerWidth);
      
      // 设置指示器的位置
      $('.indicator').css('left', indicatorLeft);
    });
  }).on('mouseup touchend', function() {
    // 停止监听鼠标移动或触摸移动事件
    $(document).off('mousemove touchmove');
  });
});