PERSONNALISER VARIABLE STEP SUR SLIDE

Fermé
JE6478 Messages postés 34 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -

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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 

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