8

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

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

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

4 回答 4

47

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

于 2015-07-29T22:45:58.327 回答
6

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

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

于 2019-01-29T12:10:04.993 回答
5

有下一个输入：

    <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;
    }
}
于 2015-07-23T11:42:45.853 回答
2

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

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

于 2012-09-06T13:33:52.363 回答