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

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

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

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

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

根据W3C 规范，step 的值可以是“任意”或正浮点数。就是这样。

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