Question

我第一次玩input type=range，理想情况下我想将步长值设置为值数组。我查看了规范，我看到了数据列表的可能性，但它接缝数据列表仅用于范围内的高亮值，可以这么说，但不是在范围内设置值。

所以，像这样（理想情况下没有jQuery插件等）：

<input type="range" min="1" max="100" value="0" step="1,3,5,10,20">

Answer 1

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

HTML

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

JS

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

小提琴：http://jsfiddle.net/26xk026z/1/

Answer 2

根据W3C spec，step的值可以是“any”或正浮点数。就是这样。

步骤属性（如果已指定）必须具有值a 有效的浮点数，解析为更大的数字比零，或必须具有ASCII不区分大小写的值匹配字符串“any”。

Answer 3

有下一个输入：

    <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（0-10）和10（10-60）

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

Answer 4

Karmacon的答案很好用，但不要忘记将属性aria-valuetext添加到输入元素。它将帮助屏幕阅读器读出正确的值。

MDN提供了一个很好的例子： https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role#Example_2_Text_Values

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

4 个答案: