Sujet Précédent Sujet Suivant

Type range HTML

Fermé
malhek69 Messages postés 77 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:

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 524
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,
0
malhek69 Messages postés 77 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?
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
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/
0

Discussions similaires

input signal out of range
marlene -
usman000 -

14 réponses
VBA : Range avec références variables..
Antoine -
MIKE59 -

7 réponses
&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses