CSS Problème d'affichage Slide
JE6478
Messages postés
34
Date d'inscription
Statut
Membre
Dernière intervention
-
JE6478 Messages postés 34 Date d'inscription Statut Membre Dernière intervention -
JE6478 Messages postés 34 Date d'inscription Statut Membre Dernière intervention -
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);
SUR LE SITE
A voir également:
- CSS Problème d'affichage Slide
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Windows 11 affichage classique - Guide
- Problème affichage facebook ✓ - Forum Facebook
- Thunderbird problème affichage message - Forum Thunderbird
4 réponses
hello
1 - J'ai déplacé ton message dans le forum CSS ( tel que je te l'avais dit...)
2 - J'avais ajouté des div class .row pour mes tests.. tu peux les retirer.
3 - J'ai retiré le code JS de ton premier bloque de code.. le bon code étant celui que tu as mis ensuite.
J'ai retiré la <div class="row"> en html et en css disposition OK et centré mais toujours ce problème de curseur .
le cadre inexistant, le curseur s'écrase sur la droite et la valeur texte et chiffre du cadre perd tout le css ajouté dessus.
Fonctionne très bien sur JSbin et ne fonctionne sur aucun navigateur lorsque je le met en ligne (j en ai essayé plusieurs).
J espère que quelqu'un pourra m aider c est le seul élément me manquant pour terminer ce slide et continuer mon site.