JSFiddle - React, Tailwind, and code Playground

by Vikram Deshmukh

HTML

<div>
    <label id="lblBreedte">Breedte:</label>
    <input class="prijsslider" type="number" id="sliBreedte" value="30" min="30" max="200" />
    <label id="txtBreedte">30 cm</label>
</div>
<div>
    <label id="lblHoogte">Hoogte:</label>
    <input class="prijsslider" type="number" id="sliHoogte" value="61" min="61" max="134" />
    <label id="txtHoogte">61 cm</label>
</div>
<div>
    <label id="lblAantal">Aantal:</label>
    <input class="prijsslider" type="number" id="sliAantal" value="1" min="1" max="4" />
    <label id="txtAantal">1 st</label>
</div>
<hr />
<div>
    <label id="lblPrijs">Prijs:</label>
    <label id="txtPrijs">€30</label>
</div>

JavaScript

$(".prijsslider").change(function () {
      if (parseInt($(this).val()) > parseInt($(this).attr("max"))) {
         $(this).val($(this).attr("max"));
      } else if (parseInt($(this).val()) < parseInt($(this).attr("min"))) {
         $(this).val($(this).attr("min"));
      }
      var breedte = $("#sliBreedte").val();
      var hoogte = $("#sliHoogte").val();
      var aantal = $("#sliAantal").val();

      var korting = (110 - (10 * aantal)) / 100;

      var prijsx = ((breedte * hoogte / 100) * korting) * aantal;

      if (prijsx < 30) {
            var prijs = 30;
      } else {
            var prijs = prijsx;
      }

      $("#txtBreedte").text(breedte + ' cm');
      $("#txtHoogte").text(hoogte + ' cm');
      $("#txtAantal").text(aantal + ' st');
      $("#txtPrijs").text('€' + prijs.toFixed(0));
  });