使滑块气泡跟随左侧手柄移动

以下是一个示例代码，演示如何使滑块气泡跟随左侧手柄移动：

HTML代码：

<div class="slider-container">
  <div class="slider-track"></div>
  <div class="slider-handle"></div>
  <div class="slider-bubble">0</div>
</div>

CSS代码：

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

.slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #777;
  transform: translateY(-50%);
}

.slider-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.slider-bubble {
  position: absolute;
  top: -30px;
  left: 0;
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

JavaScript代码：

var sliderContainer = document.querySelector('.slider-container');
var sliderHandle = document.querySelector('.slider-handle');
var sliderBubble = document.querySelector('.slider-bubble');

sliderHandle.addEventListener('mousedown', function(e) {
  var startX = e.clientX;
  var startLeft = sliderHandle.offsetLeft;

  document.addEventListener('mousemove', moveHandle);
  document.addEventListener('mouseup', stopMoveHandle);

  function moveHandle(e) {
    var offsetX = e.clientX - startX;
    var left = startLeft + offsetX;

    if (left < 0) {
      left = 0;
    } else if (left > sliderContainer.offsetWidth - sliderHandle.offsetWidth) {
      left = sliderContainer.offsetWidth - sliderHandle.offsetWidth;
    }

    sliderHandle.style.left = left + 'px';
    sliderBubble.style.left = left + 'px';
    sliderBubble.innerText = Math.round(left / (sliderContainer.offsetWidth - sliderHandle.offsetWidth) * 100);
  }

  function stopMoveHandle() {
    document.removeEventListener('mousemove', moveHandle);
    document.removeEventListener('mouseup', stopMoveHandle);
  }
});

在这个示例中，使用了HTML、CSS和JavaScript来实现滑块气泡跟随左侧手柄移动的效果。首先，HTML定义了一个包含滑块轨道、手柄和气泡的容器。然后，CSS定义了它们的样式。最后，JavaScript监听手柄的鼠标按下、移动和释放事件，计算手柄的位置并更新手柄和气泡的位置和内容。