PERSONNALISER VARIABLE STEP SUR SLIDE
Fermé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/
- PERSONNALISER VARIABLE STEP SUR SLIDE
- Comment personnaliser sa sonnerie - Guide
- Comment faire un tri personnalisé sur excel - Guide
- Personnaliser numéro de page word - Guide
- Personnaliser menu démarrer windows 11 - Guide
- Personnaliser barre des taches windows 10 - Guide