Range Slider Step variable

**JEROMESE64** · 20/11/2024, 14h54

BOnjour à tous,

je fais un slider pour calculer des comissions identique au site https://duproprio.com/fr-ca/vendre
je cherche a personnaliser la fonction step
le slider vas de 10 000 à 1 000 000 et avec le step a 5000 il y a trop de possibilité
je voudrais que le curseur puisse se déplacer uniquement sur 25000 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

**ProgElecT** · 20/11/2024, 17h00

Salut

Une façon de faire comme une autre

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
<!DOCTYPE html>
<html lang="fr">
	<!-- Commentaires HTML -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Ici le titre dans l'onglet du navigateur</title>
		<style>
                        /* ************************************ Commentaires style ********************************************** */
                </style>
		<script>//---------------------------------------------------------------------------------------
                        'use strict'; // force la déclaration des variables
                        // ************************************ Commentaires script ********************************************** 
                        //---------------------------------------------------------------------------------------------
                        let MeData=[];
                        for (let i = 1, iMax  = 40; i <= iMax; i++) {
                                MeData.push(i*25000);
                        }
                        //console.log("MeData = ",MeData);
                         
                </script>
	</head>
	<body>
		<input id="myRange" class="slider" max="40" min="1" type="range" value="1" /><div id="demo">Value: Pour 25000 La commission = 2000</div>
		<script>
                        document.querySelector('#myRange').addEventListener('input',function(){
                        document.querySelector('#demo').textContent="Pour " + MeData[this.value-1] +" La commission  = " + MeData[this.value-1]*0.08
                        })
                </script>
	</body>
</html>

**gabi7756** · 20/11/2024, 17h09

Envoyé par JEROMESE64

le slider vas de 10 000 à 1 000 000 et avec le step a 5000 il y a trop de possibilité

je voudrais que le curseur puisse se deplacer uniquement sur 25000 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

Une incohérence que j'avais déjà souligné ...

Tu fais comme progElec à fais sauf que quand ta valeur est à 1 , ca donne nom pas 1*25 000 mais 10 000

**JEROMESE64** · 20/11/2024, 17h10

Bonjour et merci beaucoup d'avoir du temps pour m'aider dans mon projet c'est très gentil de votre part, j 'ai rentré votre code et cela fonctionne par contre pas d affichage en direct du resultat il y a le masque par le texte
je repete que je suis novice merci encore

Envoyé par gabi7756

Une incohérence que j'avais déjà souligné ...

merci gabi je ne voulais pas te deranger plus que cela comment reproduire le meme slider que ce site qui utilise cette fonction ?
https://duproprio.com/#combien-puis-je-economiser

j essaye depusi 10jours a comprendre comment faire le meme sans connaissance ce n est pas facile etant la base de mon site apres avec wpbakery c est plus simple pour un novice comme moi

**NoSmoking** · 20/11/2024, 19h20

Bonjour,
l'idée de ProgElecT, bonjour à toi, est bonne et consiste à utiliser l'élément comme un « gradateur ».
J'aurais été plus loin en autorisant les valeurs de 0 à 40 et ce sans passer par un tableau.
Il suffit de faire le calcul fonction de la valeur retournée par le range.

Code html :

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

1
2
<input id="myRange" class="slider" max="40" min="0" type="range" value="0">
<output id="output"></output>

Code :

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
document.getElementById("myRange").addEventListener("input", function() {
  const STEP = 25000;
  const MINI = 10000;
  const COM = 8 / 100;
  const inputValue = this.value;
  let valeur;
 
  // version courte
  // valeur = inputValue > 0 ? inputValue * STEP : MINI;
 
  // version lisible
  if (this.value > 0) {
    valeur = this.value * STEP;
  }
  else {
    valeur = MINI;
  }
  document.getElementById("output").textContent = `Pour ${valeur} la commission est de ${valeur * COM}`;
});

Envoyé par JEROMESE64

j essaye depusi 10jours a comprendre comment faire le meme sans connaissance ce n est pas facile etant la base de mon site apres avec wpbakery c est plus simple pour un novice comme moi

Ceci n'a rien à voir avec du JavaScript et mériterait donc l'ouverture d'une autre discussion dans le forum Mise en page CSS.

A voir toutefois :

Personnalisation des <input type="range">

**JEROMESE64** · 20/11/2024, 20h02

merci pour votre réponse c est très gentil pour votre temps et votre aide le code fonctionne parfaitement aussi par contre pas d affichage si on ne touche pas au slider, .

si le step 25000 on ne peux pas afficher directement le résultat ? car en arrivant sur la page je ne voudrais pas avoir une barre vide ?

cordialement et merci a tous

**ProgElecT** · 20/11/2024, 21h41

Re

NoSmoking

@JEROMESE64, tu peux mettre l'information directement dans le code HTML

Code html :

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

<output id="output">Pour 25000 la commission est de 2000</output>

Comme cela en arrivant sur la page la barre ne sera pas vide.

**JEROMESE64** · 20/11/2024, 21h56

MERCI POUR TON RETOUR, c est sympa mais je voudrais reproduire le meme que le site
https://duproprio.com/#combien-puis-je-economiser

je ne pensais pas que c était aussi complexe de le reproduire je tourne toujours en rond

**ProgElecT** · 20/11/2024, 22h24

re

Dans ton post #6 tu demandes

si le step 25000 on ne peux pas afficher directement le résultat ? car en arrivant sur la page je ne voudrais pas avoir une barre vide ?

La ligne <output id="output">Pour 25000 la commission est de 2000</output> le fait.

je voudrais reproduire le même que le site

Là j'avoue ne pas savoir de quoi tu parles, le design du slider ? Car pour le reste, il me semble que les différentes réponses proposées font le boulot.

**JEROMESE64** · 20/11/2024, 22h34

oh que oui cela fait le boulot et merci a tous pour votre temps et vos réponses

- mon problème principal c est surtout cette histoire de plage du curseur comme mentionné dans ma question
vu que la plage est de 10 000 à 1 000 000 je voudrais qu'on puisse le déplacer que sur les valeurs défini à l'avance pour plus de précision et non pas tout les ....

Tous les 10 000 sur cette tranche
10000 20000 30000 40000

tous les 25 000 sur cette tranche
50000 75000 100000 125000 150000 175000 200000 225000 250000 275000 300000 325000 350000 375000 400000 425000 450000 475000 500000

tous les 50 000 sur cette tranche
550000 600000 650000 700000 750000 800000 850000 900000 950000 1000000

**JEROMESE64** · 21/11/2024, 11h13

J ai regardé hier soir quel serait la solution la plus simple pour personnaliser le step de mon slide et je suis tombé sur ce site ou la graduation est en % ce qui pourrait le faire pour mon probleme
https://codeconvey.com/html-range-sl...ks-and-values/

vous en pensez quoi ?

merci a tous

**gabi7756** · 21/11/2024, 11h36

Bonjour,

Pouvez-vous juste m aider a afficher le résultat du slide selon sa position plus la ligne complémentaire de 8% de la valeur ?

Tant que tu feras point d'effort sur la clarté des tes messages , personnes va comprendre, ton problème. Et il y aura encore moins de motivé pour te répondre.

sur ce modele de 1 a 10 mais j arriverais a l adapter.

Deuxio, copié collé du code trouvé sur internet ca peut faire gagner du temps mais quand tu débutes c'est contre-nature, tu apprends rien, tu recopies bêtement et tu perds plus de temps à adapter que le faire toi même. Et encore il faut réussir à adapter un code que tu comprends pas et ca ca relève du miracle.

Tierco
Le fameux site dont tu parles depuis le début, sa première valeur n'est pas 10 000 mais 25 000 …

Bref faudrait revoir la méthode

Surtout que noSmoking l'as fait plus tôt :

Envoyé par NoSmoking

Bonjour,
l'idée de ProgElecT, bonjour à toi, est bonne et consiste à utiliser l'élément comme un « gradateur ».
J'aurais été plus loin en autorisant les valeurs de 0 à 40 et ce sans passer par un tableau.
Il suffit de faire le calcul fonction de la valeur retournée par le range.

Code html :

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

1
2
<input id="myRange" class="slider" max="40" min="0" type="range" value="0">
<output id="output"></output>

Code :

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
document.getElementById("myRange").addEventListener("input", function() {
  const STEP = 25000;
  const MINI = 10000;
  const COM = 8 / 100;
  const inputValue = this.value;
  let valeur;
 
  // version courte
  // valeur = inputValue > 0 ? inputValue * STEP : MINI;
 
  // version lisible
  if (this.value > 0) {
    valeur = this.value * STEP;
  }
  else {
    valeur = MINI;
  }
  document.getElementById("output").textContent = `Pour ${valeur} la commission est de ${valeur * COM}`;
});

Ceci n'a rien à voir avec du JavaScript et mériterait donc l'ouverture d'une autre discussion dans le forum Mise en page CSS.

A voir toutefois :

Personnalisation des <input type="range">

**JEROMESE64** · 21/11/2024, 11h47

Excuse mois d'insister et d'essayer de résoudre mon problème c est toujours le titre de la question sur le forum" Range Slider Step variable "que je n arrive toujours pas à résoudre depuis le début !

grâce à l'ensemble de vos codes j ai pu adapter le slide que je voulais et je remercie tout le monde le slide fonctionne parfaitement il ne me reste plus qu'a personnaliser mon texte. et je vous remercie étant novice j'ai déjà beaucoup appris à mon niveau sur en css jquery fonction etc .....

je ne fais pas du copier coller mais j essaye d'adapter le slide a ce que je vais proposer sur mon site et trouver la solution pou repondre a ma question initiale

les step seront différente dans mon cas et il faut que je personnalise de 10 000 a 1 000 000 pour plus de clarté ce qui peut se comprendre

actuellement le step est tout les 10 000 sur mon site je cherche les solutions pour personnaliser les step comme je le precisais lors du titre de la question que j ai posé sur le forum

je cherche a avoir tous les 10 000 sur cette tranche
10000 20000 30000 40000

tous les 25 000 sur cette tranche
50000 75000 100000 125000 150000 175000 200000 225000 250000 275000 300000 325000 350000 375000 400000 425000 450000 475000 500000

tous les 50 000 sur cette tranche
550000 600000 650000 700000 750000 800000 850000 900000 950000 1000000

**gabi7756** · 21/11/2024, 12h04

Cf le message de noSmoking ... Il donne littéralement la solution , bon maintenant y a deux trois trucs a modifier mais bon ...

**NoSmoking** · 21/11/2024, 19h30

je cherche a avoir tous les 10 000 sur cette tranche
10000 20000 30000 40000 50000

tous les 25 000 sur cette tranche
~~50000~~ 75000 100000 125000 150000 175000 200000 225000 250000 275000 300000 325000 350000 375000 400000 425000 450000 475000 500000

tous les 50 000 sur cette tranche
550000 600000 650000 700000 750000 800000 850000 900000 950000 1000000

...correction d'une petite coquille dans ton énoncée !

Tu as plusieurs solutions pour associer un « niveau » de ton range au montant à afficher mais on va rester le plus simple possible

La première serait de s'inspirer de l'approche de ProgElect, à savoir l'utilisation d'un array de valeur.

On part du principe que tu as dans ton HTML

Code html :

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

<input id="myRange" class="slider" max="33" min="1" type="range" value="10">

pour tenir compte de ce que tu souhaites obtenir il te faut déclarer un array comme suit :

Code :

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
const montant = [
  10,
  20,
  30,
  40,
  50,
  75,
  100,
  125,
  150,
  175,
  200,
  225,
  250,
  275,
  300,
  325,
  350,
  375,
  400,
  425,
  450,
  475,
  500,
  550,
  600,
  650,
  700,
  750,
  800,
  850,
  900,
  950,
  1000
];

Nota :

il faudra mulitplier les montants par 1000, pas nécessaire de garder autant de zéro.
ne pas oublier que les indices de array commence à 0.

La fonction de récupération étant :

Code :

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

1
2
3
function getMontant(inputValue) {
  return montant[inputValue - 1] * 1000;
}

Si non autre méthode sans tableau avec une boucle :

Code :

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
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;
}

PS : au passage tes captures d'écran ne nous servent à rien concernant le JavaScript

**melka one** · 21/11/2024, 19h50

jour

pourquoi n'utilise tu pas l'attribut step d' un input range

**JEROMESE64** · 21/11/2024, 21h53

Merci infiniment d'avoir pris le temps de m'aider et de personnaliser le code pour mon slide, j espere pouvoir le publier prochainement avec les variation,
j ai copier ton code et je n'ai pas le résultat avec les deux codes peux tu juste me dire ou j ai fais une erreure ?

pour écrire les nombres avec un espace tout les 3 chiffres je présume qu'il y a que cette solution ? : 1 000 000 (1 000 0000 etc,...)

Code :

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

1
2
3
4
5
6
7
8
9
10
<input id="myRange" class="slider" max="1000000" min="10000" type="range" value="20000">
 
<script>
document.querySelector('#myRange').addEventListener('input',function(){ 
document.querySelector('#result').textContent =this.value*0.08 
})
</script>
 
<span id="demo"></span><strong><span style="font-size: 16pt;">* €</span></strong>
<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 :

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
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;
}
 
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;  
 
}

Code :

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
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  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: #A89153;
  cursor: pointer;
}
 
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #A89153;
  cursor: pointer;
}
.addEventListener {
color:red ;
}
 
#demo {
	width:600px;
	height:400px;
   font-size:20px;
  font-weight:bold;
	} 
 
#result {
	width:600px;
	height:400px;
   font-size:50px;
  font-weight:bold;
	} 
 
	interligne{
  line-height:5px;
}
 
}

**NoSmoking** · 22/11/2024, 10h47

Envoyé par melka one

pourquoi n'utilise tu pas l'attribut step d' un input range

simplement parce que le step n'est pas continu.

Envoyé par JEROMESE64

pour écrire les nombres avec un espace tout les 3 chiffres je présume qu'il y a que cette solution ? : 1 000 000 (1 000 0000 etc,...)

Ce n'est pas en tirant dans tous les sens que l'on avance, ceci étant il existe une méthode des plus simples

Code :

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

1
2
3
4
5
6
7
8
9
10
11
/**
 * @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);
}

Envoyé par JEROMESE64

Non non et non, il te faut utiliser

Envoyé par NoSmoking

comme écrit précédemment , à se demander si tu lis la totalité des réponses.

Tu as une correspondance entre la valeur du range, de 1 à 33, et le montant, de 10000 à 1000000, ce qui donne

Range	Montant
1	10 000 €
2	20 000 €
3	30 000 €
4	40 000 €
5	50 000 €
6	75 000 €
7	100 000 €
8	125 000 €
9	150 000 €
10	175 000 €
11	200 000 €
12	225 000 €
13	250 000 €
14	275 000 €
15	300 000 €
16	325 000 €
17	350 000 €
18	375 000 €
19	400 000 €
20	425 000 €
21	450 000 €
22	475 000 €
23	500 000 €
24	550 000 €
25	600 000 €
26	650 000 €
27	700 000 €
28	750 000 €
29	800 000 €
30	850 000 €
31	900 000 €
32	950 000 €
33	1 000 000 €

**JEROMESE64** · 22/11/2024, 14h50

Merci pour ton retour j avais bien essayé avec le input 33,.. et meme resultat apres avoir re essayé depuis plus de 2h ca ne marche pas le problème vient de moi désole je n y arrive pas même le code pour les espaces des chiffres ne fonctionne pas je ne comprends pas pourtant je le piositionne bien je regarde l ensemble du code sur jsbin et rien ne fonctionne pour moi merci pour tes efforts c est un métier cela ne s improvise pas

**gabi7756** · 22/11/2024, 15h50

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
<!DOCTYPE html>
<html lang="fr">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
                .range-container {
                        position: relative;
                        top: 50%;
                        left: 50%;
                }
                #rangeInput {
                        width: 20vw;
                }
                .popup {
                        position: relative;
                        width: 10vw;
                        height: 10vh;
                        margin-bottom: 5vh;
                }
 
                .arrow_box {
                        position: relative;
                        background: #88b7d5;
                        border: 4px solid #c2e1f5;
                }
                .arrow_box:after, .arrow_box:before {
                        top: 100%;
                        left: 50%;
                        border: solid transparent;
                        content: "";
                        height: 0;
                        width: 0;
                        position: absolute;
                        pointer-events: none;
                }
                .arrow_box:after {
                        border-color: rgba(136, 183, 213, 0);
                        border-top-color: #88b7d5;
                        border-width: 30px;
                        margin-left: -30px;
                }
                .arrow_box:before {
                        border-color: rgba(194, 225, 245, 0);
                        border-top-color: #c2e1f5;
                        border-width: 36px;
                        margin-left: -36px;
                }
        </style>
</head>
<body>
 
        <div class="range-container">
                <div id="popup" class="popup arrow_box">
                        <div id="discount"></div>
                </div>
                <input id="rangeInput" class="slider" max="33" min="1" type="range" value="10">
                <div id="price" class="price"></div>
        </div>
 
 
        <script>
                function numberWithSpaces(x) {
                        var parts = x.toString().split(".");
                        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
                        return parts.join(".");
                }
                document.querySelector('#rangeInput').addEventListener('input', function() {
                        var montant = getMontant(this.value);
                        montantWithSpace = numberWithSpaces(montant) 
                        document.querySelector('#price').textContent = montantWithSpace;
                        montantWithSpace = numberWithSpaces(montant * 0.08) 
                        document.querySelector('#discount').textContent = "Vous allez économiser : " + montantWithSpace;
                        // Surement moyen de faire mieux mais j'ai pas trouvé
 
                        document.querySelector('#popup').style.left = this.value * document.querySelector('#rangeInput').clientWidth / 33 - document.querySelector('#popup').clientWidth / 2 -4 +"px";
                        
                        
                        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;
                        }
                });
        </script>
</body>
</html>

A adapter pour le style , la mise en page etc ...

Cdt

Range Slider Step variable

JavaScript

Discussions similaires

Partager

Partager