<output> range slider afficher 16x16

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Frankduc
Messages : 1
Enregistré le : 21 juil. 2022, 18:46

<output> range slider afficher 16x16

Message par Frankduc » 21 juil. 2022, 18:50

Bonjour,

Je cherche à afficher le résultat de mon type = range slider. Cela doit faire 16x16, 2x2, 32x32

J'ai essayé ainsi:

<input type="range" min="2" max="50" value="16" class="size" oninput="this.nextElementSibling.value = this.value">
<output>16</output>

Ce qui me donne 16, 17, 30, etc au fur et à mesure que le range est glissé.
Je voudrais dupliquer le résultat pour qu'apparaisse 16x16, 17x17, etc

Il y a un moyen de faire cela?

Merci

mingdarkness
Messages : 1
Enregistré le : 09 janv. 2023, 09:55
Localisation : United States
Contact :

Re: <output> range slider afficher 16x16

Message par mingdarkness » 09 janv. 2023, 09:57

Where can I show the outcome of my type=range slider? It has to be 16x16, 2x2, or 32x32. To make it seem like 16x16, 17x17, etc., I'd want to replicate the outcome.

phillipstokes
Messages : 2
Enregistré le : 12 juil. 2023, 12:11

Re: <output> range slider afficher 16x16

Message par phillipstokes » 12 juil. 2023, 12:15

Bonjour,

Vous pouvez modifier votre code HTML et JavaScript pour afficher le résultat sous la forme "16x16", "17x17", etc. Voici comment vous pouvez le faire :

HTML :

Code : Tout sélectionner

routeros
Copy
<input type="range" min="2" max="50" value="16" class="size" oninput="updateSize(this.value)">
<output id="sizeOutput"></output>
JavaScript :

Code : Tout sélectionner

function updateSize(value) {
  var sizeOutput = document.getElementById("sizeOutput");
  sizeOutput.innerHTML = value + "x" + value;
}
Ce code utilise une fonction JavaScript appelée updateSize qui est appelée chaque fois que la valeur du range slider est modifiée. La fonction récupère la valeur actuelle du slider et l'affiche dans l'élément de sortie avec la notation "16x16", "17x17", etc.

Répondre