PERSONNALISER VARIABLE STEP SUR SLIDE

Fermé
JE6478 Messages postés 34 Date d'inscription vendredi 14 janvier 2022 Statut Membre Dernière intervention 30 novembre 2024 - 21 nov. 2024 à 16:49
jordane45 Messages postés 38423 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 février 2025 - 21 nov. 2024 à 17:13

Bonjour à tous 

J ai un slide fonctionnel et je cherche à personnaliser mon STEP qui est actuellement tout les 10 000

mon echelle va de 10 000 a 1 000 000 et je cherche à personnaliser le STEP pour plus de clareté.

je cherche a avoir 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

voici mon code au plus simple j ai le montant du slide de 10 000 a 1 000 000 et 8% du montant pour une autre fonction

HTML
 

<input id="myRange" class="slider" max="1000000" min="10000" step="5000" type="range" value="20000" />
<span  id="demo"></span>
<span id="result"></span>

<script>
document.querySelector('#myRange').addEventListener('input',function(){ 
document.querySelector('#result').textContent =this.value*0.08 
})
</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; 
}

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

#demo {
	width:600px;
	height:400px;
   font-size:30px;
  font-weight:bold;
	} 

#result {
	width:600px;
	height:400px;
   font-size:30px;
  font-weight:bold;
	} 

}

j ai trouvé une piste aevc le step fractionné en pourcentage ce qui pourrait marché mais impossible de comprendre comment l adapter avec mes deux resultats plus bas est ce la bonne piste ? ou y a t il une solution plus simple pour personnaliser le slide sur des valeurs defini a l avance

https://codeconvey.com/html-range-slider-with-ticks-and-values/

1 réponse

jordane45 Messages postés 38423 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 février 2025 4 734
21 nov. 2024 à 17:13

Bon.. ça fait déjà trois fois qu'on te demande de poursuivre dans la discussion initiale : https://forums.commentcamarche.net/forum/affich-38123224-slider-afficher-le-resultat-en-pourcentage


0