Type range HTML
Bonjour à vous,
Décidément j'ai beaucoup de mal avec le html.
Question du jour:
j'essaye de faire un type range en html sauf que quand je le créé, j'arrive pas à obtenir les valeurs sélectionnés. Auriez-vous une idée?
Merci à vous d'avance
--
Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie
Décidément j'ai beaucoup de mal avec le html.
Question du jour:
j'essaye de faire un type range en html sauf que quand je le créé, j'arrive pas à obtenir les valeurs sélectionnés. Auriez-vous une idée?
<div class="slider-wrapper">
<input type="range" list="tickmarks">
<datalist id="tickmarks">
<option value="120" label="120Go">
<option value="240" label="240">
<option value="360" label="360">
<option value="480" label="480">
<option value="1000" label="1000">
<option value="2000" label="2000">
<option value="3000" label="3000">
</datalist>
</div>
Merci à vous d'avance
--
Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie
1 réponse
-
Salut,
Tes balises options ne sont pas correctes : le libellé de l'option doit être le contenu de la balise et pas un attribut label.
Par défaut, un input type range permet de sélectionner une valeur entre 0 et 100. Pour des valeurs personnalisées avec un datalist, il faut définir les bornes de l'input type range avec les attributs min et max.
<input type="range" list="tickmarks" min="120" max="3000"> <datalist id="tickmarks"> <option value="120">120Go</option> <option value="240">240Go</option> <option value="360">3600Go</option> <option value="480">480Go</option> <option value="1000">1000Go</option> <option value="2000">2000Go</option> <option value="3000">3000Go</option> </datalist>
Attention, l'utilisation d'un datalist pour un input type range n'est pas encore implémentée correctement sur tous les navigateurs :
https://caniuse.com/#feat=datalist
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/range#Un_contr%C3%B4le_avec_des_marques_et_des_%C3%A9tiquettes
Bonne journée,-
-
En attendant, une solution alternative est d'utiliser une bibliothèque javascript permettant de réaliser ce genre de input range.
Un exemple parmi d'autres : https://refreshless.com/nouislider/
-
