Type range HTML

Fermé

malhek69 Messages postés 79 Date d'inscription mardi 6 décembre 2011 Statut Membre Dernière intervention 11 avril 2018 - 17 nov. 2017 à 13:13
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 17 nov. 2017 à 16:49

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?

<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
Br html ✓ - Forum Webmastering
Faiblesse type spectre ✓ - Forum Jeux vidéo
Balise </br> - Forum HTML
Saut de lignes sans <br/> ✓ - Forum Webmastering

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
17 nov. 2017 à 14:32

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,

malhek69 Messages postés 79 Date d'inscription mardi 6 décembre 2011 Statut Membre Dernière intervention 11 avril 2018 3
17 nov. 2017 à 16:29

Aïe mince assez embêtant ce que tu dis là...
Du coup je pourrai faire comment?

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
17 nov. 2017 à 16:49

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/

Discussions similaires

input signal out of range

comment désactiver out of range

Erreur d'exécution 13 Incompatibilité de type

Ecran noir avec 'out of range" sous windows 10

la balise <br> ou <br />