Input range
Résolu/Fermé2 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
Modifié le 22 oct. 2021 à 18:17
Modifié le 22 oct. 2021 à 18:17
Bonjour,
Une solution possible est d'ajouter un écouteur sur l’événement "oninput" de ton input type range afin de récupérer sa valeur lorsqu'on le change et de l'afficher dans un élément html.
Par exemple, je propose d'afficher la valeur de l'input dans un span auquel j'applique une classe css pour le manipuler plus facilement en js (j'ai choisi le nom "range-result" pour la classe css).
Dans le cas où on aurais besoin d'afficher plusieurs input type range, il faut indiquer pour chacun quel sera le span où afficher le résultat. Pour cela j'utilise un attribut personnalisé data-range sur la balise span.range-result qui contiendra l'identifiant de l'input type range lié à ce span.range-result.
Au passage, comme pour l'attribut personnalisé data-range, l'attribut for de la balise label devrait également correspondre à l'identifiant de l'input lié au label.
-> Ici je place la balise span.range-result directement dans le label mais on peut le déplacer n'importe où dans le document
Enfin en js, on récupère tous les éléments span.range-result puis pour chacun d'eux, on récupère l'input type range associé. On affiche alors la valeur de l'input dans le span (pour afficher la valeur dès le chargement de la page) et on applique un écouteur sur l'événement js "oninput" de l'input dans lequel on met à jour l'affichage (pour modifier la valeur lorsqu'on change l'input).
Mon test en ligne : https://jsfiddle.net/30p25yh8/
Bonne journée,
Une solution possible est d'ajouter un écouteur sur l’événement "oninput" de ton input type range afin de récupérer sa valeur lorsqu'on le change et de l'afficher dans un élément html.
Par exemple, je propose d'afficher la valeur de l'input dans un span auquel j'applique une classe css pour le manipuler plus facilement en js (j'ai choisi le nom "range-result" pour la classe css).
Dans le cas où on aurais besoin d'afficher plusieurs input type range, il faut indiquer pour chacun quel sera le span où afficher le résultat. Pour cela j'utilise un attribut personnalisé data-range sur la balise span.range-result qui contiendra l'identifiant de l'input type range lié à ce span.range-result.
Au passage, comme pour l'attribut personnalisé data-range, l'attribut for de la balise label devrait également correspondre à l'identifiant de l'input lié au label.
<!-- HTML --> <input type="range" id="DSchoix2" name="DSchoix2" min="0" max="100" step="1"> <label for="DSchoix2">Volume <span class="range-result" data-input="DSchoix2"></span></label> <br> <input type="range" id="DSchoix3" name="DSchoix3" min="0" max="100" step="1"> <label for="DSchoix3">Label <span class="range-result" data-input="DSchoix3"></span></label>
-> Ici je place la balise span.range-result directement dans le label mais on peut le déplacer n'importe où dans le document
Enfin en js, on récupère tous les éléments span.range-result puis pour chacun d'eux, on récupère l'input type range associé. On affiche alors la valeur de l'input dans le span (pour afficher la valeur dès le chargement de la page) et on applique un écouteur sur l'événement js "oninput" de l'input dans lequel on met à jour l'affichage (pour modifier la valeur lorsqu'on change l'input).
const rangeResults = document.querySelectorAll('.range-result');
rangeResults.forEach(function(rangeResult) {
const rangeInput = document.querySelector('#' + rangeResult.dataset.input);
if (rangeInput) {
rangeResult.innerHTML = rangeInput.value;
rangeInput.addEventListener('input', function(){
rangeResult.innerHTML = rangeInput.value;
});
}
});
Mon test en ligne : https://jsfiddle.net/30p25yh8/
Bonne journée,