Type range HTML
malhek69
Messages postés
79
Date d'inscription
Statut
Membre
Dernière intervention
-
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
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
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
A voir également:
- Html range
- Editeur html - Télécharger - HTML
- Clear type - Guide
- Html br ✓ - Forum Webmastering
- Balise </br> - Forum HTML
- Out of range - Forum Ecran
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.
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,
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,
Du coup je pourrai faire comment?
Un exemple parmi d'autres : https://refreshless.com/nouislider/