当前位置：首页 > JavaScript

js 实现滑块

2026-04-06 17:38:38JavaScript

实现滑块的基本结构

HTML部分需要创建一个滑块容器、轨道和滑块按钮。以下是一个基础结构：

<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;
  height: 20px;
}

.slider-track {
  width: 100%;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  position: absolute;
  top: 8px;
}

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

JavaScript交互逻辑

通过事件监听实现滑块拖动功能：

const thumb = document.querySelector('.slider-thumb');
const track = document.querySelector('.slider-track');
const container = document.querySelector('.slider-container');
const valueDisplay = document.querySelector('.slider-value');

let isDragging = false;

thumb.addEventListener('mousedown', (e) => {
  isDragging = true;
  thumb.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  const containerRect = container.getBoundingClientRect();
  let newLeft = e.clientX - containerRect.left;

  // 边界检查
  newLeft = Math.max(0, Math.min(newLeft, containerRect.width));

  // 更新位置和值
  thumb.style.left = `${newLeft}px`;
  const percent = (newLeft / containerRect.width) * 100;
  valueDisplay.textContent = Math.round(percent);
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  thumb.style.cursor = 'grab';
});

取值范围处理

将像素位置转换为具体数值范围（如0-100）：

// 在mousemove事件处理中添加
const minValue = 0;
const maxValue = 100;
const value = minValue + (maxValue - minValue) * (newLeft / containerRect.width);
valueDisplay.textContent = Math.round(value);

触摸屏支持

添加触摸事件处理实现移动端兼容：

thumb.addEventListener('touchstart', (e) => {
  isDragging = true;
});

document.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const touch = e.touches[0];
  // 使用与mousemove相同的处理逻辑
});

document.addEventListener('touchend', () => {
  isDragging = false;
});

自定义事件触发

当值变化时触发自定义事件：

// 在值更新后添加
const event = new CustomEvent('slider-change', {
  detail: { value: Math.round(value) }
});
container.dispatchEvent(event);

轨道点击跳转

实现点击轨道直接跳转到指定位置：

js 实现滑块

track.addEventListener('click', (e) => {
  const containerRect = container.getBoundingClientRect();
  const newLeft = e.clientX - containerRect.left;
  thumb.style.left = `${newLeft}px`;
  // 触发值更新逻辑
});