Forum d'Entraide Informatique (FEI)

Bonjour à tous et merci d avance a tous ceux qui prendrons le temps de m aider
pour aller au plus simple j essaye de reproduire depuis 10 jours le meme slider que ce site
https://duproprio.com/#combien-puis-je-economiser
j ai déjà bien avancé le résultat de la commission fixer a 8% fonctionne lorsqu on avance le slide mais j ai quelques problemes d ajustement et je suis novice et je n arrive pas du tout a avancer. ce serait top si on pouvait m aider ce slide est l element principal de ma page d acceuil.

1) Mon résultat n'apparait que si on bouge le slide je voudrais qu'il apparaisse en intégralité sans bouger le slide vu que le step est sur 25000

- mon problème principal c est surtout cette histoire de plage du curseur
vu que la plage est de 10 000 à 1 000 000 je voudrais qu'on puisse le déplacer que sur les valeurs défini à l'avance pour plus de précision et non pas tout les .... via le step

Tous les 10 000 sur cette tranche
10000 20000 30000 40000

tous les 25 000 sur cette tranche
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

3) de plus je n'arrive pas à ajouter le sigle € après le résultat et je n arrive pas à écrire le résultat en gras et en taille 18

je voudrais vraiment le même que sur le site en lien qui a les fonctions d évolution de tranche de step étant la premiere chose que les visiteurs trouverons sur le site . je passe plus de 10h par jour depuis 10 jours a essayer de faire ce slide. je vous remercie tous pour votre contribution

voici le code en integralité pour plus de comprhension et de comparatif avec le lien du site en haut

HTML:

Code : Tout sélectionner

<input id="myRange" class="slider" max="1000000" min="10000" step="5000" type="range" value="20000" /><span  id="demo"></span> €
<div id="result"></div>
<script>
document.querySelector('#myRange').addEventListener('input',function(){ 
document.querySelector('#result').textContent=this.value*0.08
})
</script>

CSS :

Code : Tout sélectionner

.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::-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;
}
.addEventListener {
color:red ;
}
}

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

Forum d'Entraide Informatique (FEI)

SLIDER RANGE PB VARIABLE STEP

SLIDER RANGE PB VARIABLE STEP