Comment afficher la valeur d'un contrôle d'entrée de plage HTML5 ?

Comment afficher la valeur de plage dans un contrôle de plage d'entrée en HTML5 ?

En utilisant HTML5, vous pouvez créer un curseur de plage dont la valeur est facilement affichée dans une zone de texte. Ceci est particulièrement utile pour fournir des commentaires en temps réel aux utilisateurs. Voici une solution qui exploite les fonctionnalités natives de HTML5 sans avoir besoin de JavaScript ou de jQuery :

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

Voici une répartition du code :

• min et max : définissez les valeurs minimale et maximale du curseur.
• oninput : cet écouteur d'événement se déclenche à chaque fois que la valeur du curseur change.
• nextElementSibling : utilisé pour accéder à l'élément de sortie, qui est le frère adjacent de l'entrée range.
• this.value : représente la valeur actuelle de l'entrée de plage.
•  : cet élément affiche la valeur de l'entrée de plage.

Lorsque vous faites glisser l'entrée de plage, l'événement oninput se déclenche, mettant à jour la valeur de l'élément de sortie pour refléter la position actuelle du curseur. Cela fournit une interface conviviale où la valeur exacte du curseur est toujours visible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!