js怎么实现滑动选取

2026-03-01 19:08:58JavaScript

实现滑动选取的基本方法

使用HTML5的<input type="range">元素创建滑动条基础

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

通过JavaScript监听input事件获取当前值

const slider = document.getElementById('slider');
slider.addEventListener('input', function() {
    console.log(this.value);
});

自定义样式滑动条

修改滑动条CSS样式

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 5px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #4CAF50;
    border-radius: 50%;
    cursor: pointer;
}

范围选择滑动条

实现双滑块范围选择

<div class="range-slider">
    <input type="range" class="min" min="0" max="100" value="30">
    <input type="range" class="max" min="0" max="100" value="70">
</div>

添加交互逻辑

js怎么实现滑动选取

const minSlider = document.querySelector('.min');
const maxSlider = document.querySelector('.max');

minSlider.addEventListener('input', function() {
    if (parseInt(this.value) > parseInt(maxSlider.value)) {
        maxSlider.value = this.value;
    }
});

maxSlider.addEventListener('input', function() {
    if (parseInt(this.value) < parseInt(minSlider.value)) {
        minSlider.value = this.value;
    }
});

使用第三方库实现高级功能

引入noUiSlider库

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.0/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.0/nouislider.min.js"></script>

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

初始化noUiSlider

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

触摸设备优化

添加触摸事件支持

js怎么实现滑动选取

slider.addEventListener('touchstart', handleTouch);
slider.addEventListener('touchmove', handleTouch);

function handleTouch(e) {
    const touch = e.touches[0];
    const rect = slider.getBoundingClientRect();
    const position = (touch.clientX - rect.left) / rect.width;
    const value = Math.round(position * (slider.max - slider.min)) + parseInt(slider.min);
    slider.value = value;
    slider.dispatchEvent(new Event('input'));
}

值显示与格式化

添加当前值显示

<input type="range" id="slider">
<span id="slider-value">50</span>

更新显示值

const valueDisplay = document.getElementById('slider-value');
slider.addEventListener('input', function() {
    valueDisplay.textContent = this.value;
});

格式化显示值

function formatValue(val) {
    return `$${val}.00`;
}
slider.addEventListener('input', function() {
    valueDisplay.textContent = formatValue(this.value);
});

标签: js