0

I have created a code with 4 range slider that displays only its total in "$" symbol. This total must not exceed 5 symbols in all 4 sliders. The objective is that the customer will be able to have a visual appercus without knowing the amount how much his project will cost him.

Here is the code I have done so far.

<div id="container">
  <label for="slider1">Titre 1</label>
  <input type="range" id="slider1" min="0" max="5" value="0">
  <br>
  <label for="slider2">Titre 2</label>
  <input type="range" id="slider2" min="0" max="5" value="0">
  <br>
  <label for="slider3">Titre 3</label>
  <input type="range" id="slider3" min="0" max="5" value="0">
  <br>
  <label for="slider4">Titre 4</label>
  <input type="range" id="slider4" min="0" max="5" value="0">
  <br>
  <div id="total">Total: <span id="dollar-signs"></span></div>
</div>

<style>
  #container {
    display: flex;
    flex-direction: column;
  }

  label {
    font-weight: bold;
  }

  #total {
    font-weight: bold;
  }

  #total.exceeded {
    color: red;
  }
</style>

<script>
  const sliders = document.querySelectorAll("#container input[type=range]");

function updateTotal() {
let total = 0;
sliders.forEach(slider => {
total += Number(slider.value);
});
const totalElement = document.getElementById("total");
const dollarSigns = document.getElementById("dollar-signs");
dollarSigns.innerHTML = "";
for (let i = 0; i < total; i++) {
if (i < 5) {
dollarSigns.innerHTML += "$";
}
}
if (total > 5) {
totalElement.classList.add("exceeded");
} else {
totalElement.classList.remove("exceeded");
}
}

sliders.forEach(slider => {
slider.addEventListener("input", updateTotal);
});

updateTotal();
</script>

I would like someone to help me debug my script to allow the 4 slider to display a maximum of 5 $ sybols.

Currently it does it but not correctly if my 4 sliders are at their maximum it must be 5 symbols.

NerdyBoy
  • 1
  • What exactly is your problem? If all 4 sliders are at their maximum, it shows me 5 symbols. Isn't that the expected behaviour? – timlg07 Dec 29 '22 at 17:22
  • If you max all 4 you get soming in red it's not showing max of 5. If you have 3 of max and 1 at zero you get somethings not expected – NerdyBoy Dec 29 '22 at 17:35
  • If 3 sliders are on max and one is on zero, it shows 5 symbols and red text to signal it's exceeded. Looks fine to me. Maybe you can clarify your question and/or add screenshots of current vs expected behavior? – timlg07 Dec 29 '22 at 17:41
  • Sorry you are right everything is correct in this way. However, I would like the moving dot to be in #ED1582 and the total and the $ symbol in white. – NerdyBoy Dec 29 '22 at 17:49
  • Here is how you can change the colors of a range slider: https://stackoverflow.com/a/38163892/6336728. The color of the $ symbols can be changed with the CSS color property. – timlg07 Dec 29 '22 at 20:56
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Dec 30 '22 at 08:58

0 Answers0