如何让input type="range"仅按datalist指定值滚动？

已知<input type="range">支持list属性，示例代码如下：

<input type="range" list="values">
<datalist id="values">
    <option value="0">
    <option value="30">
    <option value="40">
    <option value="60">
    <option value="100">
</datalist>

需求是滚动该滑块时，仅能跳转到datalist中指定的数值（如0→30→40…），而非默认的连续数值（0、1、2…），即需要实现基于datalist值的动态step，请问该需求能否通过该类型输入框实现？

只靠原生HTML的<input type="range">和<datalist>没法直接实现这个需求。因为list属性的作用仅仅是在滑块轨道上标记出指定的数值点，并不会限制滑块只能停留在这些点上，滑块依然会按照默认的连续步进（或者你手动设置的固定step值）来滑动。

要实现只能跳转到datalist指定数值的效果，需要结合JavaScript来处理，具体步骤如下：

• 提取datalist里所有<option>的数值，转换成排序后的数字数组
• 监听滑块的input或change事件，在滑块滑动时，找到离当前值最近的预设数值，将滑块的value设置为该数值
• 额外处理点击轨道的情况，确保点击轨道时也会跳转到最近的预设数值

示例实现代码：

<input type="range" id="customRange" list="values" min="0" max="100">
<datalist id="values">
    <option value="0">
    <option value="30">
    <option value="40">
    <option value="60">
    <option value="100">
</datalist>

<script>
const rangeInput = document.getElementById('customRange');
// 提取并排序datalist中的预设值
const presetValues = Array.from(document.getElementById('values').options)
                          .map(opt => Number(opt.value))
                          .sort((a, b) => a - b);

// 找到离当前值最近的预设值
function findClosestValue(current) {
    return presetValues.reduce((prev, curr) => {
        return Math.abs(curr - current) < Math.abs(prev - current) ? curr : prev;
    });
}

// 监听滑块滑动事件
rangeInput.addEventListener('input', (e) => {
    const closestVal = findClosestValue(Number(e.target.value));
    e.target.value = closestVal;
});

// 处理点击轨道的情况，直接定位到最近预设值
rangeInput.addEventListener('mousedown', (e) => {
    e.preventDefault();
    const rect = rangeInput.getBoundingClientRect();
    const clickPercent = (e.clientX - rect.left) / rect.width;
    const approxValue = rangeInput.min + clickPercent * (rangeInput.max - rangeInput.min);
    const closestVal = findClosestValue(approxValue);
    rangeInput.value = closestVal;
});
</script>

这段代码会在滑块滑动或点击轨道时，自动将滑块定位到datalist中最接近的指定数值，实现只能跳转到预设值的效果。

内容的提问来源于stack exchange，提问作者stkuser