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

我一直在玩input type=range第一次，理想情况下，我想设置的值为一个值的数组。我查看了规范，我发现了数据列表的可能性，但它接收的数据列表仅用于范围内的高亮值，可以这么说，但不能将值设置在范围内。html输入范围步骤作为值的数组

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

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

来源

2012-09-06 Peter Dev

按照W3C spec，对于步骤中的值可以是“任何”或正的浮点数。而已。

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

来源

2012-09-06 13:33:52 j08691

这是我采取的它。很高兴有一些验证。谢谢！！ –

我知道这是一个老问题，但该链接是404，我认为这是更新后的网址https://www.w3.org/TR/html5/forms.html#range-state-(type=range） – AllisonC

@AllisonC感谢您的领导。我正在更新链接并添加规范中的一些文本。 – j08691

具有下一个输入：

<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-23 11:42:45 IgniteCoders

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

来源

2015-07-29 22:45:58 Karmacon

辉煌。非常感谢。 – contactmatt

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

回答

相关问题