当前位置：首页 > JavaScript

js 实现滑块

2026-03-14 23:57:13JavaScript

实现滑块的基本方法

使用HTML、CSS和JavaScript可以创建一个滑块组件。HTML负责结构，CSS负责样式，JavaScript负责交互逻辑。

<input type="range" min="0" max="100" value="50" id="slider">
<div id="sliderValue">50</div>

#slider {
  width: 300px;
  margin: 20px;
}

#sliderValue {
  text-align: center;
  font-size: 18px;
}

const slider = document.getElementById('slider');
const sliderValue = document.getElementById('sliderValue');

slider.addEventListener('input', function() {
  sliderValue.textContent = this.value;
});

自定义滑块样式

如果需要更丰富的样式，可以隐藏原生滑块，使用自定义元素实现。

<div class="custom-slider">
  <div class="track"></div>
  <div class="thumb"></div>
</div>
<div class="value-display">0</div>

.custom-slider {
  width: 300px;
  height: 6px;
  background: #ddd;
  position: relative;
  margin: 30px 0;
}

.track {
  height: 100%;
  background: #4CAF50;
  width: 0%;
}

.thumb {
  width: 20px;
  height: 20px;
  background: #4CAF50;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.value-display {
  text-align: center;
  font-size: 18px;
}

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

let isDragging = false;

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

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

  const sliderRect = slider.getBoundingClientRect();
  let position = e.clientX - sliderRect.left;

  position = Math.max(0, Math.min(position, sliderRect.width));
  const percentage = (position / sliderRect.width) * 100;

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

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

使用第三方库实现

对于更复杂的需求，可以使用现成的库如noUiSlider或Swiper。

安装noUiSlider：

npm install nouislider

基本使用：

<div id="slider"></div>

import noUiSlider from 'nouislider';
import 'nouislider/dist/nouislider.css';

noUiSlider.create(document.getElementById('slider'), {
  start: [20, 80],
  connect: true,
  range: {
    'min': 0,
    'max': 100
  }
});

响应式滑块实现

确保滑块在不同屏幕尺寸下都能正常工作。

.slider-container {
  width: 80%;
  max-width: 500px;
  margin: 0 auto;
}

input[type="range"] {
  width: 100%;
}

window.addEventListener('resize', function() {
  // 重新计算滑块位置或更新UI
});

无障碍滑块实现

确保滑块对所有用户都可访问。

js 实现滑块

<label for="accessible-slider">音量控制</label>
<input type="range" id="accessible-slider" min="0" max="100" aria-valuemin="0" aria-valuemax="100">

const accessibleSlider = document.getElementById('accessible-slider');
accessibleSlider.addEventListener('input', function() {
  this.setAttribute('aria-valuenow', this.value);
});