Slider afficher le résultat en pourcentage

Bonjour 

à l'avenir, merci d'utiliser le bouton qui permet de poster correctement ton code sur le forum.

ensuite, pour tes questions, il faut les traiter dans le code

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
  // ici, tu peux faire tes calculs et changer la valeur du step
}

Merci Jordan c est tres gentil je vais regardé pour le step par contre peux tu juste m aider pour que la valeur du slider soit affiché avec 8% dans la case du bas qui est vide ?

merci mille fois pour ta gentillesse

Merci pour tout tes efforts helas je suis trop novice je n y arrive pas

je veux juste affiché le resultat value avec 8% dans une autre ligne si tu peux m aider je serais vraiement reconnaissant cela fait 8 jours que j essaye de trouver une solution 

<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>
<div class="slidecontainer">

<input id="myRange" class="slider" max="1000000" min="10000" step="10000" 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>

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

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

j ai volontairement écrit que 8% je souhaite avoir juste le résultat de 8% ici  sans rien toucher d autres

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

 je souhaite faire le meme slide que ce site pour plus de comprehension

https://duproprio.com/fr-ca/vendre

merci jordan je suis vraiment perdu étant débutant et ce slide sera la base de mon site et j essaye pourtant de comprendre mais cela ne s invente pas

j en suis la 

Il va falloir que tu apprennes le HTML,  le css ... et le Javascript...

Et si tu veux envoyer/sauvegarder des données en BDD, un langage serveur tel que le PHP et le SQL...

Bref, pour ta demande actuelle, ceci devrait suffir

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

/** si tu veux styliser le resultat */
#resultat{
  color:red;
  font-weight: bold;
}
</style>


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


<!-- BALISE SCRIPT A PLACER AVANT LE </body> de ta page !! -->
<script>
  const slider = document.getElementById("myRange");
  const output = document.getElementById("demo");
  const resultat = document.getElementById("resultat");
  
  function calculPrct(){
  //Calcul du pourcentage
    let pourcentage = parseFloat(slider.value) * 8/100 ; // https://www.w3schools.com/jsref/jsref_parsefloat.asp
    resultat.innerHTML = pourcentage.toFixed(2); // https://www.w3schools.com/jsref/jsref_tofixed.asp
  }
  
  output.innerHTML = slider.value;
  calculPrct();
  
  slider.oninput = function() {
    output.innerHTML = this.value;
    calculPrct();
  } 
  
  
</script>

Bonjour `tous je suis toujours bloqué avec mon step variable on m a donné une piste mais impossible de le mettre en place

function getMontant(inputValue) {
  // les seuils de changement de step
  const SEUIL_1 = 5;
  const SEUIL_2 = 23;
  const SEUIL_3 = 100;  // juste pour le test mais pas obligatoire ici
 
  let montant = 0;
  for (let i = 0; i < inputValue; i += 1) {
    if (i < SEUIL_1) {
      montant += 10000;
    }
    else if (i < SEUIL_2) {
      montant += 25000;
    }
    else if (i < SEUIL_3) {
      montant += 50000;
    }
  }
  return montant;
}

et un code pour avoir l espace sur les montant 10 000 au lieu de 10000

2
3
4
5
6
7
8
9
10
11
/**
 * @param {number}   en entrée : 15000
 * @returns {string} en sortie : 15 000 €
 */
function formatMontant(valeur) {
  return new Intl.NumberFormat('fr-FR', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 0
  }).format(valeur);

ma premiere mise en page fonctionne tres bien pour une page secondaire

par contre pour la page d acceuil je souhaite avoir un curseur plus grand avec une info bulle. je ne comprends pas car sur jsbin tout s affiche normalement mais sur le site c est la cata

voici mon code actuel pour le slide qui s affiche mal

<div class="range-wrap">
    <div class="range-value" id="rangeV"></div>
   
    
 <input id="range" type="range" min="10000" max="1000000" value="20000" step="10000" >
 
</div>




<p style="text-align: center;"><strong><span style="font-size: 18pt;">Vous gagnerez </span><span id="result" style="font-size: 18pt;">1600</span><span style="font-size: 18pt;">€ * en plus pour vos autres projets</span></strong></p>

 
<script>
document.querySelector('#range').addEventListener('input',function(){ 
document.querySelector('#result').textContent =this.value*0.08 
})
</script>

input[type=range] {
  -webkit-appearance: none;
  margin: 20px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: #999999;
  border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #A89153;
  box-shadow: 0 0 1px 0 rgba(0,0,0, 1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #A89153;
}
.range-wrap{
  width: 500px;
  position: relative;
}
.range-value{
  position: absolute;
  top: -230%;
}
.range-value span{
  width: 150px;
  height: 100px;
  line-height: 24px;
  text-align: center;
  background: #ffffff;
  color: #A89153;
  font-size: 25px;
  font-family: arial;
    box-shadow: 1px 1px 10px rgba(0, 0, 0);
  font-weight: bold;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 6px;
}
.range-value span:before{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #A89153;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 101%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
.text-box{
 width: 100px;
  height: 100px;
  line-height: 14px;
  text-align: center;
  color: #212121;
  font-size: 10px;
  font-family: arial;
font-weight: NORMAL;
 
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);

}

  setValue = ()=>{
    const
      newValue = Number((range.value - range.min) * 100 / (range.max - range.min) ),
      newPosition = 10 - (newValue * 0.2);
    rangeV.innerHTML = `<span><p class="text-box">PRIX DE VENTE DE VOTRE BIEN</p> <Br><Br>${range.value} €</span>`;
    rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
 };
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);

merci a tous je tourne sincerement en rond depuis tres longtemps si quelqu un peut m aider a adapter tout ça

Voici, en gros, à quoi pourrait ressembler le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title> Diaporama  </title>
    <style>
    nput[type=range] {
  -webkit-appearance: none;
  margin: 20px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: #999999;
  border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #A89153;
  box-shadow: 0 0 1px 0 rgba(0,0,0, 1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #A89153;
}
.range-wrap{
  width: 500px;
  position: relative;
}
.range-value{
  position: absolute;
  top: -230%;
}
.range-value span{
  width: 150px;
  height: 100px;
  line-height: 24px;
  text-align: center;
  background: #ffffff;
  color: #A89153;
  font-size: 25px;
  font-family: arial;
    box-shadow: 1px 1px 10px rgba(0, 0, 0);
  font-weight: bold;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 6px;
}
.range-value span:before{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #A89153;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 101%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
.text-box{
 width: 100px;
  height: 100px;
  line-height: 14px;
  text-align: center;
  color: #212121;
  font-size: 10px;
  font-family: arial;
font-weight: NORMAL;
 
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);

}

.row{
  margin-top: 150px;
  padding: 10px;
  display:inline-block;
}
    </style>
  </head>
 
<body>
<div class="row">
  <div class="range-wrap">
    <div class="range-value" id="rangeV"></div> 
    <input id="range" type="range" min="10000" max="1000000" value="20000" step="10000" >
  </div>
</div>
<div class="row">
  <p style="text-align: center;">
    <strong>
      <span style="font-size: 18pt;">Vous gagnerez </span>
      <span id="result" style="font-size: 18pt;">1600</span>
      <span style="font-size: 18pt;">€ * en plus pour vos autres projets</span>
    </strong>
  </p>
  
</div>

<script>

const range = document.querySelector('#range');
const result = document.querySelector('#result');

function caclulPrct(){
  let prct = parseFloat(range.value) * 0.8;
  result.innerHTML = prct.toFixed(2);
}

function setStep() {
  // les seuils de changement de step
  const SEUIL_1 = range.min + 50000;
  const SEUIL_2 = range.max / 2;
  const SEUIL_3 = range.max - 100000;  // juste pour le test mais pas obligatoire ici
  let step = 1;
  
  if (range.value <= SEUIL_1 ){
    step = 1000;
  }else if (range.value <= SEUIL_2 ){
    setp = 10000;
  } else if (range.value <= SEUIL_3 ) {
    step = 25000;
  } else {
    step = 75000;
  }
  
  range.step = step;
  console.log('range.value',range.value,'step',step);
}

setValue = ()=>{
    const newValue = Number((range.value - range.min) * 100 / (range.max - range.min) ),
    newPosition = 10 - (newValue * 0.2);
    rangeV.innerHTML = `<span><p class="text-box">PRIX DE VENTE DE VOTRE BIEN</p> <Br><Br>${range.value} €</span>`;
    rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
    caclulPrct();
    setStep();
 }
 
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);

</script>
  </body>
</html>

Pour ce qui est de l'affichage ( la mise en page) .. là.. il faudra poser une question propre à ce thème dans le forum CSS. ( une fois que tes soucis de Javascript) seront traités !

Merci beaucoup Jordan, regarde en appliquant ton code il n y a pas de step du tout 

ca marche tres bien a partir de 535000 par contre pas de 535 000 avec l espace en dessous ce ne marche pas 

j ai trouvé il y avait step ecrit setp et pour la separation 10 000 au lieu de 10000 tu as une idée ca marche tres bien Jordan merci beaucoup et de ta comprehension 

le calcul des 8% est faux tu as une idée ?

je t ennuie plus le step  pas facile pour qu il fonctionne j ai trouvé la solution en montant fixe vu que step est inferieur range.value <= SEUIL_3 et la les trois classe fonctionne mais je ne comprends pas exemple au dessus de 500 000 il attends qu on passe a 510 000 pour ajouter les 50 000 de plus donc 560,... 610 et en buter je n ai pas la possiiblité d aller au bout du slide et d afficher le resultat pour 1 000 000

pareil valeur max 50000 avec step de 10000 et va jusqu a 60000 avec le step de 10 000 j ai essayer de descendre en dessous les valeur mais rien a y faire j ai cet ecart de 10000 donc  

c est le step jusqu a 50 000 qui deconne au lieu de changer de valeur a partir de 50000 il change qu a partir de 60 000 donc 50 000 + (10000 step1)autre variable changement a 60000  j ai essayer inferieur a 49500 etc ... donc en bout de chaine toujours les plus 10000 qui font du 510k 560k 610k etc

j ai repris ton code aucun step avant 500 000  donc tout les 1 mais surtout le seul step qui fonctionne c est celui a 25000 et il commence qu a 510000 donc il y a une histoire de 10000 quelque part

si je met = le slide est bloqué

 on m avait dit sinon de faire avec array mais la trop compliqué pour moi mais ca deternine les valeurs fixe

input avec des valeurs  autres :

<input id="myRange" class="slider" max="33" min="1" type="range" value="10">

const montant = [
  10,
  20,
  30,
  40,
  50,
  75,
  100,
  125,
  150,
  175,
  200,
  225,
  250,
  275,
  300,
  325,
  350,
  375,
  400,
  425,
  450,
  475,
  500,
  550,
  600,
  650,
  700,
  750,
  800,
  850,
  900,
  950,
  1000
];

et une fonction de recuperation

function getMontant(inputValue) {
  return montant[inputValue - 1] * 1000;
}

mais impossible a comprendre et mettre en place 

correspondance entre la valeur du range, de 1 à 33, et le montant, de 10000 à 1000000, ce qui donne
Range	Montant
1	10 000 €
2	20 000 €
3	30 000 €
4	40 000 €
5	50 000 €
6	75 000 €
7	100 000 €
8	125 000 €
9	150 000 €
10	175 000 €
11	200 000 €
12	225 000 €
13	250 000 €
14	275 000 €
15	300 000 €
16	325 000 €
17	350 000 €
18	375 000 €
19	400 000 €
20	425 000 €
21	450 000 €
22	475 000 €
23	500 000 €
24	550 000 €
25	600 000 €
26	650 000 €
27	700 000 €
28	750 000 €
29	800 000 €
30	850 000 €
31	900 000 €
32	950 000 €
33	1 000 000 €

avec array ca commence a zero pas grave si ca fonctionne et si on peu pour l affichage value:20000

je n'ai pas dot de mettre des = ... mais des < 

maintenant, peux tu simplement nous indiquer quels seuils tu veux et quel step tu souhaites y associer ? 

moi j'ai pris des valeurs au pif ne sachant pas ce que tu voulais...

au passage,. j'espère que tu  comprends le code que je t'ai donné... sinon tu ne pourras jamais l'adapter à tes besoins vu, il me semble, ton manque de connaissances dans le langage js.

c est compliqué mais a passer autant de temps dessus ca a l avantage d en apprendre pas mal mais pas assez pour avoir le slide j y suis dessus depuis plus de 2 semaines et j y passe bcp d heure par jour mais je bloque toujours

je cherche a avoir tous les 10 000 sur cette tranche
10000 20000 30000 40000 jusqu a 50000

tous les 25 000 sur cette tranche
de 50000 75000 100000 125000 150000 175000 200000 225000 250000 275000 300000 325000 350000 375000 400000 425000 450000 475000 500000

tous les 50 000 sur cette tranche
550000 600000 650000 700000 750000 800000 850000 900000 950000 1000000

merci jordan le code bloque a 510000 pas possible d aller plus loin dans le step et toujours cette histoire de 10000. car il devrait s arreter a 500000 pour finir a 1000000 avec des valeurs comprehensible par tranche de 50000

tu en penses quoi du code array ? ca peut se mettre en place ? car si on ecrit directement les valeur ca peut etre plus simple peut pas cette erreur de 10000?

merci encore

le step de 10000 change qu a partir de 60000 au lieu de 50000 donc apres step de 250000 donc 60k 85k 110k 135k etc au lieu de 50k 75k 100k 125k  donc il va a cause des 10000 a 60000 a 510 000 au lieu de 500 000 et apres le step de + de 500000 ne fonctionne pas bloquant le slide