如何创建带文本的引导滑块

<div class="slider-container">
  <div class="slider"></div>
  <span class="slider-text">滑动以解锁</span>
</div>

.slider-container {
  position: relative;
  width: 300px;
  height: 50px;
  background-color: #f0f0f0;
  border-radius: 25px;
  overflow: hidden;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #007bff;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #333;
}

const sliderContainer = document.querySelector('.slider-container');
const slider = document.querySelector('.slider');
const sliderText = document.querySelector('.slider-text');

let isDragging = false;

slider.addEventListener('mousedown', () => {
  isDragging = true;
});

slider.addEventListener('mousemove', (e) => {
  if (isDragging) {
    const xPos = e.clientX - sliderContainer.getBoundingClientRect().left;
    const maxX = sliderContainer.offsetWidth - slider.offsetWidth;
    
    if (xPos >= 0 && xPos <= maxX) {
      slider.style.left = xPos + 'px';
      sliderText.textContent = '滑动解锁';
    } else if (xPos > maxX) {
      slider.style.left = maxX + 'px';
      sliderText.textContent = '解锁成功';
      // 执行解锁成功后的操作
    }
  }
});

slider.addEventListener('mouseup', () => {
  isDragging = false;
});

slider.addEventListener('mouseleave', () => {
  isDragging = false;
});