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

【问题标题】：html input range step as an array of valueshtml 输入范围步骤作为值数组
【发布时间】：2012-08-31 07:32:00
【问题描述】：

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

所以，像这样（最好没有 jQuery 插件等）：

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

【问题讨论】：

标签： html html-input

【解决方案1】：

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

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

【讨论】：

这也是我的看法。很高兴有一些验证。谢谢！！
我知道这是一个老问题，但那个链接是 404，我认为这是更新后的 url w3.org/TR/html5/forms.html#range-state-(type=range)
@AllisonC 感谢您的提醒。我正在更新链接并添加规范中的一些文本。

【解决方案2】：

有下一个输入：

    <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;
    }
}

【讨论】：

【解决方案3】：

您可以通过将值存储在数组中并将滑块用作数组的索引器来实现此目的。此示例将在您滑动时逐步完成 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>

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/

【讨论】：

【解决方案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

【讨论】：

正是我想要的！谢谢！