Affichage pourcentage Range slider value

**JEROMESE64** · 19/11/2024, 17h03

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
Nom : Capture d'�cran 2024-11-19 164745.png
Affichages : 120
Taille : 10,3 Ko

Nom : Capture d'�cran 2024-11-19 164745.png
Affichages : 120
Taille : 10,3 Ko

html

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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;
}

**gabi7756** · 19/11/2024, 17h08

Bonjour,
Un truc comme ca devrait t'aider :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**JEROMESE64** · 19/11/2024, 17h48

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

**gabi7756** · 20/11/2024, 08h34

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**JEROMESE64** · 20/11/2024, 10h25

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**gabi7756** · 20/11/2024, 10h35

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

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<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 ?

**JEROMESE64** · 20/11/2024, 10h36

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

genial

**gabi7756** · 20/11/2024, 10h51

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

**JEROMESE64** · 20/11/2024, 11h42

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

merci gabi

**JEROMESE64** · 20/11/2024, 14h20

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

amicalement,

Jerome

Affichage pourcentage Range slider value

JavaScript

Discussions similaires

Partager

Partager