Mise en place du code variable Step slide + pb affichage
Bonjour à tous je suis bloqué avec mon step variable sur un slide range on m a donné une piste mais impossible de mettre le code reçu en place si quelqu'un peut m aider.
function getMontant(inputValue) {
// les seuils de changement de step
const SEUIL_1 = 5;
const SEUIL_2 = 23;
const SEUIL_3 = 100; // juste pour le test mais pas obligatoire ici
let montant = 0;
for (let i = 0; i < inputValue; i += 1) {
if (i < SEUIL_1) {
montant += 10000;
}
else if (i < SEUIL_2) {
montant += 25000;
}
else if (i < SEUIL_3) {
montant += 50000;
}
}
return montant;
}
et un code pour avoir l espace sur les montants 10 000 au lieu de 10000
/**
* @param {number} en entrée : 15000
* @returns {string} en sortie : 15 000 €
*/
function formatMontant(valeur) {
return new Intl.NumberFormat('fr-FR', {
style: 'currency',
currency: 'EUR',
minimumFractionDigits: 0
}).format(valeur);
ma premiere mise en page fonctionne tres bien pour une page secondaire sans les mofidications que je n arrive pas a ajouter
mais par contre pour la page d accueil je souhaite avoir un slide avec un curseur plus grand avec une info bulle. je ne comprends pas car sur jsbin tout s affiche normalement mais sur le site c est la cata une piste ? et biensur je souhaite rajouter les codes mentionné plus haut pour avoir l ensemble des fonctionnalité pour ce slide
vu avec JSBIN tout va bien l info bulle est présente
une fois en ligne
voici le code du dernier slide
<div class="range-wrap">
<div class="range-value" id="rangeV"></div>
<input id="range" type="range" min="10000" max="1000000" value="20000" step="10000" >
</div>
<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>
<script>
document.querySelector('#range').addEventListener('input',function(){
document.querySelector('#result').textContent =this.value*0.08
})
</script>
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: 14px;
text-align: center;
color: #212121;
font-size: 10px;
font-family: arial;
font-weight: NORMAL;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
setValue = ()=>{
const
newValue = Number((range.value - range.min) * 100 / (range.max - range.min) ),
newPosition = 10 - (newValue * 0.2);
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))`;
};
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
Merci d'avance à tous ceux qui pourront m'aider
- Mise en place du code variable Step slide + pb affichage
- Code ascii - Guide
- Mise en forme conditionnelle excel - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Code puk bloqué - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide


