Mise en place du code variable Step slide + pb affichage

JE6478 Messages postés 11 Date d'inscription vendredi 14 janvier 2022 Statut Membre Dernière intervention 23 novembre 2024 - 23 nov. 2024 à 16:56

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 

A voir également: