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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> Diaporama </title>
</head>
<body>
<div class="row">
<div class="range-wrap">
<div class="range-value" id="rangeV"></div>
<input id="range" type="range" min="10000" max="3000000" value="20000" step="10000" >
</div>
</div>
<div class="row">
<p style="text-align: center;">
<strong>
<span style="font-size: 18pt;">Vous gagnerez </span>
<span id="result" style="font-size: 18pt;">1600</span>
<span style="font-size: 18pt;">€ * en plus pour vos autres projets</span>
</strong>
</p>
</div>
</html>
input[type=range] {
-webkit-appearance: none;
margin: 20px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
animate: 0.2s;
background: #999999;
border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
height: 20px;
width: 20px;
border-radius: 50%;
background: #A89153;
box-shadow: 0 0 1px 0 rgba(0,0,0, 1);
cursor: pointer;
-webkit-appearance: none;
margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #A89153;
}
.range-wrap{
width: 500px;
position: relative;
}
.range-value{
position: absolute;
top: -230%;
}
.range-value span{
width: 150px;
height: 100px;
line-height: 24px;
text-align: center;
background: #ffffff;
color: #A89153;
font-size: 25px;
font-family: arial;
box-shadow: 1px 1px 10px rgba(0, 0, 0);
font-weight: bold;
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
border-radius: 6px;
}
.range-value span:before{
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 10px solid #A89153;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 101%;
left: 50%;
margin-left: -5px;
margin-top: -1px;
}
.text-box{
width: 100px;
height: 100px;
line-height: 10px;
text-align: center;
color: #212121;
font-size: 10px;
font-family: arial;
font-weight: NORMAL;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.row{
margin-top: 150px;
padding: 10px;
display:inline-block;
}
const range = document.querySelector('#range');
const result = document.querySelector('#result');
// Liste des valeurs autorisées
const 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
];
function caclulPrct(){
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ée
if (!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);
JSBIN tout fonctionne parfaitement
Afficher la suite
