js实现滑动解锁

<div id="slider-container">
  <div id="slider-track"></div>
  <div id="slider-thumb"></div>
</div>

#slider-container {
  position: relative;
  width: 300px;
  height: 40px;
  background-color: #eee;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  user-select: none;
}

#slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  height: 6px;
  background-color: #76c7c0;
  transform: translateY(-50%);
  border-radius: 3px;
}

#slider-thumb {
  position: absolute;
  top: 5px;
  left: 0;
  width: 40px;
  height: 30px;
  background-color: #76c7c0;
  border-radius: 20px;
  cursor: pointer;
}

const sliderContainer = document.getElementById('slider-container');
const sliderThumb = document.getElementById('slider-thumb');
let isDown = false;
let startX;
let currentX;

sliderContainer.addEventListener('mousedown', (e) => {
  isDown = true;
  startX = e.clientX - sliderThumb.offsetLeft;
});

sliderContainer.addEventListener('touchstart', (e) => {
  isDown = true;
  startX = e.touches[0].clientX - sliderThumb.offsetLeft;
});

document.addEventListener('mousemove', (e) => {
  if (!isDown) return;
  currentX = e.clientX - sliderContainer.offsetLeft;
  if (currentX < 0) currentX = 0;
  if (currentX > sliderContainer.offsetWidth - sliderThumb.offsetWidth) {
    currentX = sliderContainer.offsetWidth - sliderThumb.offsetWidth;
  }
  sliderThumb.style.left = currentX + 'px';
});

document.addEventListener('touchmove', (e) => {
  if (!isDown) return;
  currentX = e.touches[0].clientX - sliderContainer.offsetLeft;
  if (currentX < 0) currentX = 0;
  if (currentX > sliderContainer.offsetWidth - sliderThumb.offsetWidth) {
    currentX = sliderContainer.offsetWidth - sliderThumb.offsetWidth;
  }
  sliderThumb.style.left = currentX + 'px';
});

document.addEventListener('mouseup', () => {
  if (isDown && currentX >= sliderContainer.offsetWidth - sliderThumb.offsetWidth - 5) {
    // 解锁成功
    alert('解锁成功！');
  }
  isDown = false;
});

document.addEventListener('touchend', () => {
  if (isDown && currentX >= sliderContainer.offsetWidth - sliderThumb.offsetWidth - 5) {
    // 解锁成功
    alert('解锁成功！');
  }
  isDown = false;
});