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 : 100
Taille : 10,3 Ko

Nom : Capture d'écran 2024-11-19 164745.png
Affichages : 100
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