Affichage pourcentage Range slider value

[jerome64]

bonjour a tous et merci d avance a ceux qui prendront quelques minutes pour m aider je suis novice et je tourne en rond depuis 10 jours pour quelques choses qui doit être très simple.
je cherche a faire le meme slide que ce site pour simplier
https://duproprio.com/fr-ca/vendre

J ai deja l ensemble du slide qu iaffiche le resultat lors du deplacement mais je n arrive pas a afficher 8% du montant de ce meme montant
on m a aider en me disant d utiliser montantslider * 8/100 en me précisant que pour les champs de type "input", c'est le .value qu'il faut manipuler et non pas le .innerHTML mais je n y arrive pas quelqu'un peut m aider ? je serais vraiment reconnaissant

voici ou j en suis la case est vierge au lieu d avoir 8% de 465000 soit un affichage de 37200 en plus de value 465000

Capture d'écran 2024-11-19 164745.png (10.25 Kio) Vu 6835 fois

mon code HTML ;

<style>
.slidecontainer {<br /> width: 100%;<br />}</p>
<p>.slider {<br /> -webkit-appearance: none;<br /> width: 100%;<br /> height: 15px;<br /> border-radius: 5px;<br /> background: #d3d3d3;<br /> outline: none;<br /> opacity: 0.7;<br /> -webkit-transition: .2s;<br /> transition: opacity .2s;<br />}</p>
<p>.slider:hover {<br /> opacity: 1;<br />}</p>
<p>.slider::-webkit-slider-thumb {<br /> -webkit-appearance: none;<br /> appearance: none;<br /> width: 25px;<br /> height: 25px;<br /> border-radius: 50%;<br /> background: #04AA6D;<br /> cursor: pointer;<br />}</p>
<p>.slider::-moz-range-thumb {<br /> width: 25px;<br /> height: 25px;<br /> border-radius: 50%;<br /> background: #04AA6D;<br /> cursor: pointer;<br />}<br /></style>

&nbsp;
<div class="slidecontainer">

<input id="myRange" class="slider" max="1000000" min="10000" step="5000" type="range" value="20000" />Value: <span id="demo"></span>

</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
output.innerHTML = this.value;
}
</script>

8% :



JAVAscript


var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value;
}

[angeltrait]

bonjour a tous et merci d avance a ceux qui prendront quelques minutes pour m aider je suis novice et je tourne en rond depuis 10 jours pour quelques choses qui doit être très simple.
je cherche a faire le meme slide que ce site pour simplier
https://duproprio.com/fr-ca/vendre

J ai deja l ensemble du slide qu iaffiche le resultat lors du deplacement mais je n arrive pas a afficher 8% du montant de ce meme montant
on m a aider en me disant d utiliser montantslider * 8/100 en me précisant que pour les champs de type "input", c'est le .value qu'il faut manipuler et non pas le .innerHTML mais je n y arrive pas quelqu'un peut m aider ? je serais vraiment reconnaissant

voici ou j en suis la case est vierge au lieu d avoir 8% de 465000 soit un affichage de 37200 en plus de value 465000
Capture d'écran 2024-11-19 164745.png

mon code HTML ;

<style>
.slidecontainer {<br /> width: 100%;<br />}</p>
<p>.slider {<br /> -webkit-appearance: none;<br /> width: 100%;<br /> height: 15px;<br /> border-radius: 5px;<br /> background: #d3d3d3;<br /> outline: none;<br /> opacity: 0.7;<br /> -webkit-transition: .2s;<br /> transition: opacity .2s;<br />}</p>
<p>.slider:hover {<br /> opacity: 1;<br />}</p>
<p>.slider::-webkit-slider-thumb {<br /> -webkit-appearance: none;<br /> appearance: none;<br /> width: 25px;<br /> height: 25px;<br /> border-radius: 50%;<br /> background: #04AA6D;<br /> cursor: pointer;<br />}</p>
<p>.slider::-moz-range-thumb {<br /> width: 25px;<br /> heigmoto x3mht: 25px;<br /> border-radius: 50%;<br /> background: #04AA6D;<br /> cursor: pointer;<br />}<br /></style>

&nbsp;
<div class="slidecontainer">

<input id="myRange" class="slider" max="1000000" min="10000" step="5000" type="range" value="20000" />Value: <span id="demo"></span>

</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
output.innerHTML = this.value;
}
</script>

8% :



JAVAscript


var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value;
}

Pour afficher 8% du montant du slider, il faut bien multiplier la valeur du slider par 0,08 et l'afficher dans un autre élément. Voici un exemple de code ajouté à votre script :

Code : Tout sélectionner

function updateValues() {
    var sliderValue = this.value;
    output.innerHTML = sliderValue; // Affiche la valeur du slider
    document.getElementById("pourcentage").innerHTML = sliderValue * 0.08; // Affiche 8% du montant
}

slider.oninput = updateValues;

N'oubliez pas d'ajouter un élément HTML pour afficher le pourcentage, par exemple :

Code : Tout sélectionner

<span id="pourcentage"></span>`.