html entrée plage de gamme comme un tableau de valeurs

J'ai joué avec le input type=range pour la première fois, et idéalement, je voudrais définir la valeur de l'étape à un tableau de valeurs. J'ai regardé sur la spécification et je vois la possibilité pour un datalist mais il semble que la liste de données ne soit utilisée que pour les valeurs de surbrillance dans une plage, pour ainsi dire, mais ne définissant pas les valeurs dans la plage.html entrée plage de gamme comme un tableau de valeurs

Donc, quelque chose comme ça (idéalement sans plugin jQuery, etc.):

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

Source

2012-09-06 Peter Dev

Selon le W3C spec, les valeurs pour l'étape peut être « tout » ou un nombre à virgule flottante positif. C'est tout.

L'attribut étape, si spécifié, doit avoir soit une valeur qui est un nombre à virgule flottante valide qui analyse à un nombre qui est supérieur à zéro, ou doit avoir une valeur qui est une crémerie- ASCII insensible correspond à la chaîne "any".

Source

2012-09-06 13:33:52 j08691

Ce fut mon avis sur la question aussi bien. C'est bien d'avoir une certaine validation. Merci!! –

Je sais que c'est une vieille question, mais ce lien était 404, je pense que c'est l'URL mise à jour https://www.w3.org/TR/html5/forms.html#range-state-(type=range) – AllisonC

@AllisonC Merci pour les heads up. Je suis en train de mettre à jour le lien et d'ajouter du texte de la spécification. – j08691

Avoir l'entrée suivante:

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

Voici ma fonction pour changer les étapes de 1 (0-10) et 10 (10-60)

function toggleSteps(element) { 
    var minutes = parseInt(element.value); 
    if (minutes > 10) { 
     element.step = 10; 
    } else { 
     element.step = 1; 
    } 
}

Source

2015-07-23 11:42:45 IgniteCoders

Vous pouvez obtenir ceci en stockant les valeurs dans un tableau et en utilisant le curseur comme indexeur pour le tableau. Cet exemple passera par 1, 3, 5, 10, 20, 50, 100 pendant que vous glissez.

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

Fiddle: http://jsfiddle.net/26xk026z/1/

Source

2015-07-29 22:45:58 Karmacon

Brillant. Merci beaucoup. – contactmatt

html entrée plage de gamme comme un tableau de valeurs

Répondre

Questions connexes