Affichage pourcentage Range slider value

Version imprimable

1 pièce(s) jointe(s)

Bonjour, je suis novice et je cherche a afficher 8% du résultat du slide obtenue lorsqu on le deplace le calcul est simple le resultat affiché value : 8% sur une ligne en dessous. 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
Pièce jointe 661942

html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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

Code:

1
2
3
4
5
6
7
8
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;
}

Bonjour,
Un truc comme ca devrait t'aider :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <style>
    </style>
  </head>
<body>
  <input id="myRange" class="slider" max="1000000" min="10000" step="5000" type="range" value="20000" />Value: <span id="demo"></span>
</body>
<script>
document.querySelector('#myRange').addEventListener('input',function(){
   console.log(this.value)
   console.log(this.value/this.max)
})
</script>
</body>
</html>

Tu modifies pour mettre à jour la div qui affiche le % et puis pof
Cdt

19/11/2024, 17h48
JEROMESE64

Merci gabi,

j ai rentré ton code et helas je n ai pas la ligne en dessous avec en plus le calcul de 8% de la value

je suis vraiment novice tu parles de div je ne sais surement pas comment faire mais merci infiniment d avoir pris le temps de me répondre

j essaye depuis plus de 10 jours de reproduire ce slide avec 8% au lieu de 5%
voir site ci apres
https://duproprio.com/fr-ca/vendre

Bonjour,
Réexplique moi ce que tu veux ?
La valeur saisie via ton slider ? Un pourcentage ? Bref quoi ?

Si tu veux 8% de ton slider :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
  <input id="myRange" class="slider" max="1 000 000" min="10000" step="5000" type="range" value="20000" />Value: <span id="demo"></span>
  <div id="result"></div>
</body>
<script>
document.querySelector('#myRange').addEventListener('input',function(){
   document.querySelector('#result').textContent=this.value*0.08
// Si tu veux ton slider moins 8% :
 document.querySelector('#result').textContent=this.value-this.value*0.08
// En plus consi ca donne ca :
 document.querySelector('#result').textContent=this.value*0.92
})
</script>

Cdt

Gabi je voulais te remercier mille fois tu as réussi a me sortir de mon problème grâce a ton code ce matin, c'est très gentil de ta part d avoir pris autant de temps.

une dernière petite chose mon step est de 5000 de 20 000 a 1 000 000 ce qui fait beaucoup sur le slider est il possible de rentrer les plages du step personnalisé ?

25000 50000 75000 100000 125000 150000 175000 200000 225000 250000 275000 300000 325000 350000 375000 400000 425000 450000 475000 500000 550000 600000 650000 700000 750000 800000 850000 900000 950000 1000000

vois ton code que j ai utilisé et qui fonctionne
Code:

1 2 3 4 5 6 7 <input id="myRange" class="slider" max="1000000" min="10000" step="5000" type="range" value="20000" />Value: <span id="demo"></span> <div id="result"></div> <script> document.querySelector('#myRange').addEventListener('input',function(){ document.querySelector('#result').textContent=this.value-this.value*0.08 }) </script>
merci encore Gabi pour ton code

20/11/2024, 10h35
gabi7756

Un message clair ca fait gagner du temps ...
Dans ton code html :

Code:

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

Ton minimum est à 10 000, or dans ta liste de valeur 10 000 n'est pas présent :
25000 50000 75000 100000 125000 150000 175000 200000 225000 250000 275000 300000 325000 350000 375000 400000 425000 450000 475000 500000 550000 600000 650000 700000 750000 800000 850000 900000 950000 1000000
Du coup tu veux faire quoi ? Commencer a 10 000 ou commencer a 25 000 et faire des steps de 25 000 ?
20/11/2024, 10h36
JEROMESE64

merci commencer a 10000 et apres 25000 50000 etc .......
c est possible ?

genial
20/11/2024, 10h51
gabi7756

La c'est une colle , je pense pas que ca soit possible , surtout que l'intérêt est limité , si tu a différent écart entre chaque valeur généralement tu utilises pas un slider ...
Donc bon je dirai que c'est pas possible,
Comme disait mon chef , explique moi pourquoi tu en as besoin , moi je vais te montrer comment tu vas pouvoir t'en passer :ptdr:
20/11/2024, 11h42
JEROMESE64

sinon commencer a 25000 pou resumer j essaye de faire le meme slide que ce site
https://duproprio.com/fr-ca/vendre

merci gabi
20/11/2024, 14h20
JEROMESE64

merci infiniment pour m avoir aider je te souhaite une bonne continuation

amicalement,

Jerome