JSFiddle - React, Tailwind, and code Playground
HTML
<input type="range" name="foo" id="depom" class="istyle" value="10" min="10" max="1000" step="0.01" onmousemove="getP()">
<input readonly id="mmid" value="10">
<select id="plane" onchange="getP()" value="15">
<option value="15">option 1</option>
<option value="18">option 2</option>
<option value="24">option 3</option>
</select>
<input readonly id="total2" value="15">
<input readonly id="total" value="18.00">
<div id="ausgabe">
</div>
JavaScript
getP = function() {
var numVal1 = Number(document.getElementById("depom").value);
var numVal2 = Number(document.getElementById("plane").value);
var totalValue3 = numVal1
document.getElementById("mmid").value = totalValue3.toFixed(2);
var totalValue2 = numVal2
document.getElementById("total2").value = totalValue2.toFixed();
var totalValue = (numVal1 / 100) * numVal2 * 12
document.getElementById("total").value = totalValue.toFixed(2);
document.getElementById("ausgabe").innerHTML = "<p>Dies ist die Totalvalue: "+ totalValue + "</p>";
if (numVal2 === 15){
vchild = document.getElementById("depom").value = "10"
minchild = document.getElementById("depom").min = "10"
maxchild = document.getElementById("depom").max = "1000"
}
if (numVal2 === 18 ){
vhous = document.getElementById("depom").value = "1000"
minhous = document.getElementById("depom").min = "1000"
maxhous = document.getElementById("depom").max = "10000"
}
if (numVal2 === 24){
vexp = document.getElementById("depom").value = "10000"
minexp = document.getElementById("depom").min = "10000"
maxexp = document.getElementById("depom").max = "100000"
}
}