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>

**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.

**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

Range Slider Step variable

JavaScript

Vue hybride

Discussions similaires

Partager

Partager