js实现滑块

实现滑块的基本思路

HTML部分需要创建一个滑块轨道和滑块按钮，CSS负责样式设计，JavaScript处理交互逻辑。

<div class="slider-container">
  <div class="slider-track"></div>
  <div class="slider-thumb"></div>
  <span class="slider-value">0</span>
</div>

CSS样式设置

滑块轨道和滑块的样式需要明确区分，添加过渡效果提升用户体验。

.slider-container {
  position: relative;
  width: 300px;
  margin: 20px;
}

.slider-track {
  height: 4px;
  background: #ddd;
  border-radius: 2px;
}

.slider-thumb {
  width: 20px;
  height: 20px;
  background: #4CAF50;
  border-radius: 50%;
  position: absolute;
  top: -8px;
  left: 0;
  cursor: pointer;
}

.slider-value {
  display: inline-block;
  margin-left: 10px;
}

JavaScript交互逻辑

通过事件监听实现滑块的拖拽功能，计算滑块位置并更新显示值。

const thumb = document.querySelector('.slider-thumb');
const track = document.querySelector('.slider-track');
const valueDisplay = document.querySelector('.slider-value');
let isDragging = false;

thumb.addEventListener('mousedown', (e) => {
  isDragging = true;
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

function onMouseMove(e) {
  if (!isDragging) return;

  const trackRect = track.getBoundingClientRect();
  let newLeft = e.clientX - trackRect.left;

  newLeft = Math.max(0, Math.min(newLeft, trackRect.width));
  const percent = (newLeft / trackRect.width) * 100;

  thumb.style.left = `${percent}%`;
  valueDisplay.textContent = Math.round(percent);
}

function onMouseUp() {
  isDragging = false;
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', onMouseUp);
}

触摸屏支持

为移动设备添加触摸事件支持，确保在触屏设备上也能正常使用。

thumb.addEventListener('touchstart', (e) => {
  isDragging = true;
  document.addEventListener('touchmove', onTouchMove);
  document.addEventListener('touchend', onTouchEnd);
});

function onTouchMove(e) {
  if (!isDragging) return;

  const trackRect = track.getBoundingClientRect();
  let newLeft = e.touches[0].clientX - trackRect.left;

  newLeft = Math.max(0, Math.min(newLeft, trackRect.width));
  const percent = (newLeft / trackRect.width) * 100;

  thumb.style.left = `${percent}%`;
  valueDisplay.textContent = Math.round(percent);
}

function onTouchEnd() {
  isDragging = false;
  document.removeEventListener('touchmove', onTouchMove);
  document.removeEventListener('touchend', onTouchEnd);
}

值范围设置

添加最小值和最大值参数，使滑块可以适应不同的数值范围需求。

const minValue = 0;
const maxValue = 100;

function updateValueDisplay(percent) {
  const value = minValue + Math.round((maxValue - minValue) * (percent / 100));
  valueDisplay.textContent = value;
}

自定义事件触发

当滑块值改变时触发自定义事件，便于其他组件监听滑块变化。

function dispatchSliderChange(value) {
  const event = new CustomEvent('slider-change', { detail: { value } });
  document.dispatchEvent(event);
}