Discussion :

[JEROMESE64]

Bonjour à tous je tenais à vous remercier infiniment car j ai enfin réussi a faire mon slide, il me reste qu'un probleme de css mais tout fonctionne grâce a vos codes et du temps passé à m aider. merci encore c'est tres gentil de votre part

amicalement Jerome

[NoSmoking]

je regarde l ensemble du code sur jsbin et rien ne fonctionne pour moi merci

c'est bien mais dans ce cas il aurait été plus judicieux de nous montrer ton code pour que l'on puisse le corriger

[JEROMESE64]

oui biensur

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 :

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

Ouverture d'une nouvelle discussion :

Personnaliser un input type="range"