js实现滑动选择
实现滑动选择的基本思路
滑动选择通常指用户通过拖拽或滑动交互来选择数值或范围，常见于移动端或需要精细调整的场景。以下是几种实现方式：
使用原生HTML5 Range Input
HTML5提供了<input type="range">原生滑动选择控件，可通过JavaScript监听事件实现交互：
<input type="range" id="slider" min="0" max="100" value="50">
<div id="value-display">50</div>const slider = document.getElementById('slider');
const display = document.getElementById('value-display');
slider.addEventListener('input', (e) => {
display.textContent = e.target.value;
});自定义滑动选择组件
如需更高定制化效果，可通过监听鼠标/触摸事件实现：
<div class="slider-track">
<div class="slider-thumb"></div>
</div>
<div class="slider-value">0</div>const thumb = document.querySelector('.slider-thumb');
const track = document.querySelector('.slider-track');
const valueDisplay = document.querySelector('.slider-value');
let isDragging = false;
thumb.addEventListener('mousedown', () => { isDragging = true; });
document.addEventListener('mouseup', () => { isDragging = false; });
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const trackRect = track.getBoundingClientRect();
let position = (e.clientX - trackRect.left) / trackRect.width;
position = Math.max(0, Math.min(1, position));
thumb.style.left = `${position * 100}%`;
valueDisplay.textContent = Math.round(position * 100);
});使用第三方库
对于复杂需求，可考虑成熟库如：
- noUiSlider：轻量级、高度可定制
- Swiper：支持触摸滑动的多功能库
- rc-slider（React场景）
以noUiSlider为例：
<div id="slider"></div>import noUiSlider from 'nouislider';
import 'nouislider/dist/nouislider.css';
noUiSlider.create(document.getElementById('slider'), {
range: { min: 0, max: 100 },
start: [20, 80],
connect: true
});移动端触摸适配
自定义实现时需添加触摸事件支持：
thumb.addEventListener('touchstart', () => { isDragging = true; });
document.addEventListener('touchend', () => { isDragging = false; });
document.addEventListener('touchmove', (e) => {
if (!isDragging) return;
const touchX = e.touches[0].clientX;
// 后续逻辑与mousemove相同
});性能优化建议
事件监听使用被动模式提升滚动性能：
document.addEventListener('touchmove', handleMove, { passive: true });使用transform代替left/top定位实现硬件加速：
thumb.style.transform = `translateX(${position * 100}%)`;
