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