html输入范围步骤作为值数组

我第一次使用了

input type=range

，理想情况下，我希望将步长值设置为一个值数组。我查看了规范，我看到了数据列表的可能性，但数据列表仅用于高亮显示范围内的值，可以说，但不设置范围内的值

所以，类似这样的东西（理想情况下没有jQuery插件，等等）：

根据，步骤的值可以是“任意”或正浮点数。就这样

如果指定了步骤属性，则该属性的值必须为 解析为更大数字的有效浮点数 大于零，或者必须具有不区分大小写的ASCII值 匹配字符串“any”

具有下一个输入：

    <input id="currentTimeInput" type="range" value="1" min="0" max="60" oninput="toggleSteps(this);" list=mapsettings>
    <datalist id=mapsettings>
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>20</option>
        <option>30</option>
        <option>40</option>
        <option>50</option>
        <option>60</option>
    </datalist>

---

可以通过将值存储在数组中并使用滑块作为数组的索引器来实现这一点。本例将在您滑动时逐步执行1、3、5、10、20、50、100

HTML

---

Fiddle:

Karmacon的答案很好，但别忘了将属性

aria valuetext

添加到输入元素中。它将帮助屏幕阅读器读取正确的值

MDN提供了一个很好的例子：

---

这也是我对它的看法。很高兴有一些验证。谢谢我知道这是一个老问题，但那个链接是404，我想这是更新的url@AllisonC，谢谢提醒。我正在更新链接并从规范中添加一些文本。这正是我想要的！非常感谢。

    <input id="currentTimeInput" type="range" value="1" min="0" max="60" oninput="toggleSteps(this);" list=mapsettings>
    <datalist id=mapsettings>
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>20</option>
        <option>30</option>
        <option>40</option>
        <option>50</option>
        <option>60</option>
    </datalist>

function toggleSteps(element) {
    var minutes = parseInt(element.value);
    if (minutes > 10) {
        element.step = 10;
    } else {
        element.step = 1;
    }
}

<input id="input" type="range" min="0" value="0" max="6" step="1">
<div id="output"></div>

var values = [1,3,5,10,20,50,100];    //values to step to

var input = document.getElementById('input'),
   output = document.getElementById('output');

input.oninput = function(){
    output.innerHTML = values[this.value];
};
input.oninput(); //set default value