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
- Mise a jour windows 10 - Accueil - Mise à jour