Personnaliser un input type="range"

**JEROMESE64** · 25/11/2024, 18h44

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** · 26/11/2024, 12h04

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** · 26/11/2024, 15h06

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

**Dave Hiock** · 28/11/2024, 13h05

\ô/

comment proceder

note simplement le lien dans la discussion.

**JEROMESE64** · 28/11/2024, 16h22

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** · 29/11/2024, 11h19

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.

Personnaliser un input type="range"

CSS

Vue hybride

Discussions similaires

Partager

Partager