Slider afficher le résultat en pourcentage
RésoluJE6478 Messages postés 34 Date d'inscription Statut Membre Dernière intervention -
Bonsoir a tous grâce a jordan sur le forum il m a trouvé un tuto slide qui correspond à ce que je souhaite mais j ai un souci je voudrais avoir un résultat mulitplier par 8%
j ai un slide mini 20000 maxi 1000000 lorsque je déplace le curseur j'ai bien le montant qui s affiche ce qui est très bien par contre dans la case du bas je cherche à avoir le résultat avec 8% en m'arrêtant sur 20 000 je souhaite qu il affiche 1600 etc ...
De plus j ai utilisé la fonction step pour un intervalle de 5000 mais comment faire un intervalle de 5000 jusqu a 50 000€ et intervalle de 10000 de 50000€ à 100 000€ et intervalle de 50 000€ jusqu a 1000000
voici le code et copie d ecran apres
<p>[vc_column][/vc_column][vc_column_text css=""][/vc_column_text][vc_row][vc_column width="1/4"][/vc_column][vc_column width="1/4"][vc_raw_html css=".vc_custom_1731969255070{border-top-width: 1px !important;border-right-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;border-left-style: solid !important;border-right-style: solid !important;border-top-style: solid !important;border-bottom-style: solid !important;border-radius: 10px !important;border-color: #212121 !important;}"]JTNDc3Ryb25nJTNFJTNDc3BhbiUyMHN0eWxlJTNEJTIyZm9udC1zaXplJTNBJTIwMThwdCUzQiUyMiUzRSUzQ3NwYW4lMjBpZCUzRCUyMmRlbW8lMjIlM0UlM0MlMkZzcGFuJTNFJTIwJUUyJTgyJUFDJTNDc2NyaXB0JTNFJTBBdmFyJTIwc2xpZGVyJTIwJTNEJTIwZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQlMjglMjJteVJhbmdlJTIyJTI5JTNCJTBBdmFyJTIwb3V0cHV0JTIwJTNEJTIwZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQlMjglMjJkZW1vJTIyJTI5JTNCJTBBb3V0cHV0LmlubmVySFRNTCUyMCUzRCUyMHNsaWRlci52YWx1ZSUzQiUwQSUwQXNsaWRlci5vbmlucHV0JTIwJTNEJTIwZnVuY3Rpb24lMjglMjklMjAlN0IlMEElMjAlMjBvdXRwdXQuaW5uZXJIVE1MJTIwJTNEJTIwdGhpcy52YWx1ZSUzQiUwQSU3RCUwQSUzQyUyRnNjcmlwdCUzRSUzQyUyRnNwYW4lM0UlM0MlMkZzdHJvbmclM0U=[/vc_raw_html][vc_raw_html css=".vc_custom_1731969374498{border-top-width: 1px !important;border-right-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;border-left-style: solid !important;border-right-style: solid !important;border-top-style: solid !important;border-bottom-style: solid !important;border-radius: 10px !important;border-color: #212121 !important;}"]JTNDc3Ryb25nJTNFJTNDc3BhbiUyMHN0eWxlJTNEJTIyZm9udC1zaXplJTNBJTIwMThwdCUzQiUyMiUzRSUzQ3NwYW4lMjBpZCUzRCUyMmRlbW8lMjIlM0UlM0MlMkZzcGFuJTNFJTIwJUUyJTgyJUFDJTNDc2NyaXB0JTNFJTBBdmFyJTIwc2xpZGVyJTIwJTNEJTIwZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQlMjglMjJteVJhbmdlJTIyJTI5JTNCJTBBdmFyJTIwb3V0cHV0JTIwJTNEJTIwZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQlMjglMjJkZW1vJTIyJTI5JTNCJTBBb3V0cHV0LmlubmVySFRNTCUyMCUzRCUyMHNsaWRlci52YWx1ZSUzQiUwQSUwQXNsaWRlci5vbmlucHV0JTIwJTNEJTIwZnVuY3Rpb24lMjglMjklMjAlN0IlMEElMjAlMjBvdXRwdXQuaW5uZXJIVE1MJTIwJTNEJTIwdGhpcy52YWx1ZTIlM0IlMEElN0QlMEElM0MlMkZzY3JpcHQlM0UlM0MlMkZzcGFuJTNFJTNDJTJGc3Ryb25nJTNF[/vc_raw_html][/vc_column][vc_column width="1/4"][vc_wp_text]</p>
<style>
.slidecontainer {<br /> width: 100%;<br />}</p>
<p>.slider {<br /> -webkit-appearance: none;<br /> width: 100%;<br /> height: 15px;<br /> border-radius: 5px;<br /> background: #d3d3d3;<br /> outline: none;<br /> opacity: 0.7;<br /> -webkit-transition: .2s;<br /> transition: opacity .2s;<br />}</p>
<p>.slider:hover {<br /> opacity: 1;<br />}</p>
<p>.slider::-webkit-slider-thumb {<br /> -webkit-appearance: none;<br /> appearance: none;<br /> width: 25px;<br /> height: 25px;<br /> border-radius: 50%;<br /> background: #04AA6D;<br /> cursor: pointer;<br />}</p>
<p>.slider::-moz-range-thumb {<br /> width: 25px;<br /> height: 25px;<br /> border-radius: 50%;<br /> background: #04AA6D;<br /> cursor: pointer;<br />}<br /></style>
<div class="slidecontainer">
<p><strong><span style="font-size: 18pt;"><input id="myRange" class="slider" max="1000000" min="10000" step="5000" type="range" value="20000" /></span></strong></div>
<p>[/vc_wp_text][/vc_column][vc_column width="1/4"][/vc_column][/vc_row]</p>
et JavaScript
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value;
}
et css
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #04AA6D;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #04AA6D;
cursor: pointer;
}
le but c est de faire le meme slider que ce site
https://duproprio.com/fr-ca/vendre
voila ou j en suis ma case est vierge car je ne sais pas faire la formul eavec l affiche du resultat je suis totalement novice
merci d avance a tout le monde
- Slider afficher le résultat en pourcentage
- Resultat foot - Télécharger - Vie quotidienne
- Excel camembert pourcentage - Guide
- Afficher appdata - Guide
- Lexer resultat - Télécharger - Sport
- Afficher google en page d'accueil - Guide
27 réponses
Meric Jordan cela fonctionne mieux mais a au lieu d afficher 75000 il affiche 80 000 et sur tout le reste 5000 de plus sur les valeurs pourtant défini a l avance je n y comprends rien .
pourtant apres 100 000 tres bien et apres 130000 150000 puis 180000 puis 20000
un sur deux avec 5000 de plus
a partir de 500000 ca fonctionne normalement de 75000 a 500000 1 valeur sur deux avec résultat +5000 pourtant
J ai trouvé 5000 il allait a la tranche supérieur comme mentionné dans le code donc j ai modifié range.step = 5000; et cela marche merci beaucoup Jordan t es au top tout marche nikel et je peux ainsi le personnaliser si besoin c est nikel
sans abuser tu sais comment je peux faire pour avoir les deux résultats écrit
10 000 au lieu de 10000 espace tout les milles ?
j avais ce code mais j ai cherche a le placé partout et il ne fonctionne pas du tout x est le dernier parametre en plus du css qui me manque
/**
* @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);
}
Tu places cette fonction dans le code js par exemple juste au dessus de la fonction setValue
puis tu modifies la ligne de ton code :
rangeV.innerHTML = `<span><p class="">PRIX DE VENTE DE VOTRE BIEN</p> <Br><Br>${formatMontant(currentValue)} ?</span>`;
PS: n'oublie pas de remettre le sujet en RESOLU
Ca marche a merveille c est génial par contre pour le code html" result"comment appliqué le code current ? pour l espace entre les chiffres comme le code précédant j ai essayé tout les style possible et je n arrive pas a l adapté
id="result"
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionj ai posé ton code jquery
mais ma ligne est dans la partie html result j ai essayé beaucoup de chose mais il change pas
<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>
de quoi tu cause ???
Jquery ... où ça ??
le code actuel n'utilise pas une ligne de jquery... ( d'où est-ce que tu nous sors ça ??! )
Ensuite, je ne comprends pas ce que tu as essayé de faire ?
N'as tu pas vu que la ligne que je t'ai donné se trouve dans le code que je t'ai donné ??
function caclulPrct(){
let prct = parseFloat(range.value) * 0.08;
result.innerHTML = prct.toFixed(2);
}
qu'il faut donc changer par
function caclulPrct(){
let prct = parseFloat(range.value) * 0.08;
result.innerHTML = formatMontant(prct.toFixed(2));
}
.