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輸入範圍步驟作爲值的數組

回答

相關問題