Comment afficher la valeur de la plage en utilisant uniquement HTML et CSS ?

Affichage de la valeur de plage à l'aide d'une plage de type d'entrée HTML5

La création d'un site Web avec un curseur de plage offre un moyen pratique d'ajuster les valeurs. Cependant, il peut être avantageux d'afficher la valeur actuelle de la diapositive dans une zone de texte pour une référence plus facile. Bien que jQuery fournisse une solution simple, il est possible d'obtenir cette fonctionnalité en utilisant uniquement HTML et CSS.

Solution :

Pour afficher sans effort la valeur de la plage actuelle sans JavaScript, implémentez le code HTML suivant :

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

Dans ce code :

• Le L'élément définit le curseur de plage avec des attributs pour ses valeurs de valeur, minimale et maximale.
• L'écouteur d'événement oninput met à jour la valeur de l'élément de sortie frère adjacent chaque fois que le curseur de plage est ajusté.
• L'élément L'élément affiche la valeur de plage actuelle.

En utilisant cette méthode, vous pouvez facilement afficher la valeur de plage dans une zone de texte sans avoir besoin de scripts externes.

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!