JE6478
Messages postés34Date d'inscriptionvendredi 14 janvier 2022StatutMembreDernière intervention30 novembre 2024
-
Modifié le 24 nov. 2024 à 23:27
JE6478
Messages postés34Date d'inscriptionvendredi 14 janvier 2022StatutMembreDernière intervention30 novembre 2024
-
24 nov. 2024 à 23:55
Bonjour à tous j ai un slide qui fonctionne parfaitement sur JSbin mais des qui est publié sur le site c est la cata la disposition ne fonctionne plus mais surtout le curseur n'a plus sont cadre autour et arrivé en buter de slide pour le dernier résultat le texte s écrase contre la droite. si quelqu un a une idée
<!DOCTYPEhtml><htmllang="fr"><head><metacharset="utf-8"><title> Diaporama </title></head><body><divclass="row"><divclass="range-wrap"><divclass="range-value"id="rangeV"></div><inputid="range"type="range"min="10000"max="3000000"value="20000"step="10000"></div></div><divclass="row"><pstyle="text-align: center;"><strong><spanstyle="font-size: 18pt;">Vous gagnerez </span><spanid="result"style="font-size: 18pt;">1600</span><spanstyle="font-size: 18pt;">€ * en plus pour vos autres projets</span></strong></p></div></html>
const range = document.querySelector('#range');const result = document.querySelector('#result');// Liste des valeurs autoriséesconst allowedValues =[10000,20000,30000,40000,50000,75000,100000,125000,150000,175000,200000,225000,250000,275000,300000,325000,350000,375000,400000,425000,450000,475000,500000,550000,600000,650000,700000,750000,800000,850000,900000,950000,1000000,2000000,3000000];functioncaclulPrct(){
let prct =parseFloat(range.value)*0.08;
result.innerHTML = prct.toFixed(0);}
setValue =()=>{const newValue =Number((range.value - range.min)*100/(range.max - range.min));
newPosition =10-(newValue *0.2);
range.step =10000;
let currentValue =parseInt(range.value);
console.log('currentValue', currentValue);// Vérifier si la valeur est autoriséeif(!allowedValues.includes(currentValue)){// Trouver la valeur la plus proche dans la liste autorisée
let closestValue = allowedValues.reduce((prev, curr)=>{return(Math.abs(curr - currentValue)<Math.abs(prev - currentValue)? curr : prev);});// Mettre à jour la valeur de l'input avec la valeur la plus proche
range.value = closestValue;
console.log('closestValue', closestValue);
currentValue = closestValue;}
console.log('range.value',range.value);// N'hésites pas à ouvrir la console JS de ton navigateur pour voir ce qui s'y affiche
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();}
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);