Discussion :

[JEROMESE64]

Bonjour, cette discussion fait suite à Range Slider Step variable

J'ai le code suivant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
  <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>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
  input[type=range] {
  -webkit-appearance: none;
  margin: 20px 0;
  width: 100%;
}
 
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;
}
 
.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: 12px;
  text-align: center;
  color: #212121;
  font-size: 12px;
  font-family: arial;
font-weight: bold;
 
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
 
}

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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
];
 
function caclulPrct(){
  let prct = parseFloat(range.value) * 0.08;
  result.innerHTML = formatMontant(prct.toFixed(2));
}
 
function formatMontant(valeur) {
  return new Intl.NumberFormat('fr-FR', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 0
  }).format(valeur);
}
 
 
setValue = ()=>{
    const newValue = Number((range.value - range.min) * 100 / (range.max - range.min) );
    newPosition = 10 - (newValue * 0.2);
 
    range.step = 5000;
    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>${formatMontant(currentValue)}</span>`;
 
  rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
    caclulPrct();
 
 }
 
document.addEventListener("DOMContentLoaded", setValue);
 
range.addEventListener('input', setValue);

tout fonctionne parfaitement le seul probleme c est le css
il fonctionne parfaitement sur JSbin mais pas sur le site depuis la photo je l ai centré il n y a plus de CSS sur la box et en buté elle s ecrase completement
Pièce jointe 662222

Pièce jointe 662225

ce que j ai remarqué c est que le code que j ai utilisé ne fonctionnait pas sans aucun ajout de ma part en etant brut il y a donc une erreur a la base du code
Pièce jointe 662223
https://css-tricks.com/value-bubbles-for-range-inputs/

c est le seul obstacle qu'il me manque pour avancer avec peut être en chipotant une couleur de progression sur le slide mais merci infiniment a tout ceux qui on participé a ce resultat vous etes au top

[gabi7756]

Bonjour, ton site est en local ou distant ?
Genre je peux y accéder ?

c'est le seul obstacle qu'il me manque pour avancer avec peut être en chipotant une couleur de progression sur le slide mais merci infiniment a tout ceux qui on participé a ce resultat vous etes au top

Pour le chipotage du changement de couleur

Quand ton évènement se déclenche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

range.addEventListener('input', setValue);

Il faut déjà déterminer quel panel de couleur tu veux , du rouge au vert ... Du blanc au noir ... Bref faut faire un choix mais après ca devrai pas être trop dur


En css ca donnerai ca pour modifier la couleur :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
input[type="range"] {
  accent-color: rgb(0,50,255); 
}

Cdt

[JEROMESE64]

bonjour gabi il est en ligne tu peux y accéder comment proceder

[Dave Hiock]

\ô/

comment proceder

note simplement le lien dans la discussion.

[JEROMESE64]

bonjour a tous j ai reussi a trouver le probleme d affichage pour le CSS donc tout va bien de ce côté
j essaye d ajouter un texte au dessus du résultat en javascipt mais je ne trouve pas comment faire j ai essayé ceci ca marche sur JSBIN mais pas en ligne désolé ca va vous faire rire je comprends pas grand chose a javascipt

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

rangeV.innerHTML = `<span class="text-box"> PRIX DE VENTE DE VOTRE BIEN</span>${formatMontant(currentValue)}`;

sur JSBIN je voudrais comme ceci
Pièce jointe 662338

en ligne ca donne cela
Pièce jointe 662339

je ne sais pas comment afficher ce texte et qu'il utilise le css .text-box
j ai ajouter un content dans le css pour ne pas taper le texte sur javascipt mais je ne sais pas comment appeler le css a venir dans le javascipt
si quelqu un peu m aider ca serait top
Pièce jointe 662340

[Dave Hiock]

ca marche sur JSBIN mais pas en ligne désolé

pourquoi ne pas mettre le lien vers ton JSBIN ?

Quoiqu'il en soit ce n'est pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

rangeV.innerHTML = `<span class="text-box"> PRIX DE VENTE DE VOTRE BIEN</span>${formatMontant(currentValue)}`;

qu'il faut mais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

rangeV.innerHTML = `<span class="text-box"> PRIX DE VENTE DE VOTRE BIEN ${formatMontant(currentValue)}</span>`;

pour que les déclarations CSS text-box s'appliquent à ${formatMontant(currentValue)}, il doit être à l'intérieur du <span></span>.

Copie-colle les codes plutôt que de mettre des images.

[JEROMESE64]

bonjour a tous et merci d avoir pris le temps de répondre, j ai essayé le code de gabi pour avoir la barre de progression qui change de couleur en deplacant le curseur mais avec le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
input[type="range"] {
  accent-color: rgb(0,50,255); 
}

j ai aucun changement

Meric a Dave Hiock pour ta reponse ja i bien deplacé le span mais toujours le meme probleme je ne comprends pas pourquoi ca ne marche pas desole a tous je suis novice mais a force ca va rentrer

[JEROMESE64]

si je deplace le span le texte du haut 'prix de vente de votre bien' sera bien avec la css 'text-box'
mais le resultat aussi prendra le meme css au lieu d utiliser le css .range-value qui me defini la taille la couleur depuis le debut

[NoSmoking]

Bonjour,
accent-color ne s'appliquera pas sur un élément personnalisé, possédant la propriété -webkit-appearance: none;.

si je deplace le span le texte du haut 'prix de vente de votre bien' sera bien avec la css 'text-box'

problème de structure, mais difficile de te suivre

Sur base de ce HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="slider-tooltip">Valeur du bien<br><output id="slider-value"></output></div>

il suffit de modifier le textContent de l'élément <output>.

Exemple :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const elemRangeVal = document.getElementById("slider-value");
elemRangeVal.textContent = formatMontant(currentValue);

pas la peine de tout reprendre.

[JEROMESE64]

génial merci mille fois et pour avoir une couleur de progression du curseur differente ? si none ne s applique pas comment je peux faire pour enfin publier mon slide?

[NoSmoking]

pour avoir une couleur de progression du curseur differente

tu n'as pas d'autres choix que de passer par la « customisation » de ton <input>, chose que tu as déjà commencé.

Concernant la barre d'avancement, les choses auraient pu être simple si le moteur de rendu Blink (Chromium et consorts) reconnaissait le pseudo-élément ::-moz-range-progress, présent dans Gecko, (FireFox) et parfaitement autonome, il suffit de lui déclarer la couleur de fond souhaitée.

Il va donc falloir, au moins pour Blink, gérer la propriété background du pseudo-élément ::-webkit-slider-runnable-track.

Une autre façon de procéder est d'utiliser la propriété background-size de l'<input> pour simuler l'avancement, c'est celle choisie dans l'exemple que je fournis ci-dessous.

Il existe une solution en pur CSS combinant les propriétés clip-path et box-shadow, certes moins paramétrable mais tout autant efficace !

Mais comme on utilise d'autres parts JavaScript alors pas de soucis majeur

Exemple :

• Gap variable sur un input type="range"

Nota: cet exemple reprend les problématiques que tu as rencontrées jusqu'à présent.

Et comme toujours, Les sliders d'Ana Tudor, valent que l'on s'y intéresse, comme par exemple celui-ci !

[JEROMESE64]

c est genial
comment je peux reprendre le code complet pour etre sure de pas faire d erreur ? aussi bien en html /css/javascript c est exactement ce qui me faut pour enfin pouvoir le publier et passer a autre chose

merci mille fois c est exactement ca
https://nosmoking.developpez.com/dem...-variable.html

[NoSmoking]

comment je peux reprendre le code complet pour etre sure de pas faire d erreur ?

j'ai très légèrement repris le code de la page et pour résumer :
• pour le CSS il te faut simplement récupèer ce qui se trouve en début de page entre les balises

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<style id="css-slider">
.slider-wrapper {
  <!-- la suite du CSS -->
</style>

• pour le JavaScript il te faut récupérer ce qui se trouve en fin de page entre les balises

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script id="js-slider">
"use strict";
// Initialisation après chargement du DOM
document.addEventListener("DOMContentLoaded", () => {
  // ... la suite du code
});
</script>

... il te faut également supprimer la fonction function detailValeurs() :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
  //-- uniquement pour la démo
  function detailValeurs() {
    const html = ["<table><thead><tr><th>Range</th><th>Montant</th></thead><tbody><tr>"];
    for (let i = +elemRange.min; i < +elemRange.max + 1; i += 1) {
      html.push("<td>" + i + "</td><td>" + formatMontant(getMontant(i)) + "</td>")
    }
    document.getElementById("detail-value").innerHTML = html.join("</tr><tr>") + "</tbody></table>";
  }

...qui n'est là que pour la démo ainsi que son appel en fin de script

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  // uniquement pour la démo, juste pour voir les valeurs
  detailValeurs();

... et cela devrait le faire.

[JEROMESE64]

merci mille fois pour mais je n arrive pas a le reproduire

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="range-wrap">
<div id="rangeV" class="range-value"></div>
<input id="range" max="1000000" min="10000" step="10000" type="range" value="20000" />
 
</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>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
input[type=range] {
  -webkit-appearance: none;
  margin: 20px 0;
  width: 100%;
}
 
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;
}
 
.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: 12px;
  text-align: center;
  color: #212121;
  font-size: 12px;
  font-family: arial;
font-weight: bold;
 
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
 
}

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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
];
 
function caclulPrct(){
  let prct = parseFloat(range.value) * 0.08;
  result.innerHTML = formatMontant(prct.toFixed(2));
}
 
function formatMontant(valeur) {
  return new Intl.NumberFormat('fr-FR', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 0
  }).format(valeur);
}
 
 
setValue = ()=>{
    const newValue = Number((range.value - range.min) * 100 / (range.max - range.min) );
    newPosition = 10 - (newValue * 0.2);
 
    range.step = 5000;
    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 = `PRIX DE VENTE DE VOTRE BIEN${formatMontant(currentValue)}`;
 
  rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
    caclulPrct();
 
 }
 
document.addEventListener("DOMContentLoaded", setValue);
 
range.addEventListener('input', setValue);

[NoSmoking]

mais je n arrive pas a le reproduire

la seule chose que je puisse faire pour toi, c'est te donner un code autonome qui fonctionne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input type range with variable gap</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2172217">
<meta name="category" content="css,js">
<meta name="description" content="Exemple d'&lt;input type="range"&gt; personnalisé avec des «*gap*» variables et une «*tooltip*» suivant le curseur.">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}
.slider-wrapper {
  --thumb-diameter: 2em;
  --thumb-radius: calc(var(--thumb-diameter) / 2);
  --track-border-width: 1px;
  --value: 50;
  --pos: calc(var(--thumb-radius) + .01 * var(--value) *(100% - var(--thumb-diameter)));
  max-width: 30em;
  margin: 1em auto;
  text-align: center;
  font-size: 1.25em;
}
.slider-wrapper .info {
  padding: 1em;
}
.slider-wrapper output {
  font-weight: 700;
  color: #4A0;
}
.slider-tooltip {
  --tooltip-background: #FFE;
  --tooltip-border-width: 1px;
  --tooltip-border-color: #080;
  --tooltip-hight-arrow: 1.5em;
  width: fit-content;
  margin: auto;
  margin-bottom: 2.5em;
  margin-left: calc(var(--pos) + var(--track-border-width));
  padding: 1em;
  border: var(--tooltip-border-width) solid var(--tooltip-border-color);
  border-radius: 5px;
  white-space: nowrap;
  background-color: var(--tooltip-background);
  box-shadow: 0 3px 14px rgba(0,0,0,0.4);
  translate: calc( -50%);
  transition: .25s;
}
.slider-tooltip::after {
  content: "";
  position: absolute;
  top: calc(100% + var(--tooltip-border-width));
  left: 50%;
  width: var(--tooltip-hight-arrow);
  height: var(--tooltip-hight-arrow);
  border: inherit;
  border-top: none;
  border-left: none;
  background-color: inherit;
  box-shadow: none;
  transform: translate(-50%,-50%) rotate(45deg);
}
input[type="range"].slider {
  --track-height: .7em;
  --track-background: linear-gradient(#690, #EFD);
  --thumb-background: #4A0;
  --thumb-border: 2px solid #FFF;
  --effect-over: 0 0 0 .75em #4A02;
  --effect-active: 0 0 0 .75em rgba(85, 255,0, .2);
  display: block;
  -webkit-appearance: none;
  box-sizing: content-box;
  width: 100%;
  height: var(--track-height);
  margin: 0;
  border: var(--track-border-width) solid #AAA;
  border-radius: 5px;
  font-size: 1em;
  outline: none;
  opacity: 0.7;
  background: #CCC8;
  background-image: var(--track-background);
  background-position: 0 center;
  background-repeat: no-repeat;
  background-size: var(--pos) var(--track-height);
  box-shadow: 0 0 1em #CCC;
  cursor: pointer;
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: var(--thumb-diameter);
  height: var(--thumb-diameter);
  border: var(--thumb-border);
  border-radius: 50%;
  background: var(--thumb-background);
  box-shadow: 0 0 .5em #888;
  cursor: ew-resize;
}
input[type="range"].slider::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb-diameter);
  height: var(--thumb-diameter);
  border: var(--thumb-border);
  border-radius: 50%;
  background: var(--thumb-background);
  box-shadow: 0 0 .5em #888;
  cursor: ew-resize;
}
input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: var(--effect-over);
}
input[type="range"]::-moz-range-thumb:hover {
  box-shadow: var(--effect-over);
}
</style>
</head>
<body>
<div class="slider-wrapper">
  <div class="slider-tooltip">Valeur du bien<br><output id="slider-value"></output></div>
  <input id="slider-range" class="slider" max="33" min="1" type="range" value="17">
  <p class="info">Pour un bien de <output id="output-value"></output><br>vous économiserez <output id="output-eco"></output></p>
</div>
<script>
"use strict";
// Initialisation après chargement du DOM
document.addEventListener("DOMContentLoaded", () => {
  //--
  function formatMontant(valeur) {
    return new Intl.NumberFormat('fr-FR', {
      style: 'currency',
      currency: 'EUR',
      minimumFractionDigits: 0
    }).format(valeur);
  }
  //-- optimisable sans boucle !!!!
  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
    const STEP_1 = 10000;
    const STEP_2 = 25000;
    const STEP_3 = 50000;
    let montant = 0;
    for (let i = 0; i < inputValue; i += 1) {
      if (i < SEUIL_1) {
        montant += STEP_1;
      }
      else if (i < SEUIL_2) {
        montant += STEP_2;
      }
      else if (i < SEUIL_3) {
        montant += STEP_3;
      }
    }
    return montant;
  };
  //--
  function handlerInputRange(inputValue) {
    const COM = 8 / 100;
    // récup montant
    const intMontant = getMontant(inputValue);
    // formate les sorties
    const strMontant = formatMontant(intMontant);
    const strCommission = formatMontant(intMontant * COM);
    // affichage données
    elemRangeVal.textContent = strMontant;
    elemOuputVal.textContent = strMontant;
    elemOuputEco.textContent = strCommission;
  }
  //--
  const elemWrapper = document.querySelector(".slider-wrapper");
  const elemRange = document.getElementById("slider-range");
  const elemRangeVal = document.getElementById("slider-value");
  const elemOuputVal = document.getElementById("output-value");
  const elemOuputEco = document.getElementById("output-eco");
  const ratio = 100 / (+elemRange.max - +elemRange.min);
 
  elemRange.addEventListener("input", function() {
    // mise à jour valeur dans infoBulle
    handlerInputRange(this.value);
    // mise à jour position infoBulle et avancement via le CSS
    const value = ratio * (this.value - elemRange.min);
    elemWrapper.style.setProperty('--value', + value);
  });
  // force affichage la 1st fois
  elemRange.dispatchEvent(new Event("input"));
});
</script>
</body>
</html>

à toi de faire les aménagements fonctions de ta sensibilité

[JEROMESE64]

Merci infiniment pour ton aide j ai enfin ce que je souhaite merci encore pour ta patience et ta gentillesse pour tout le temps passé