JSFiddle - React, Tailwind, and code Playground

by Valerii Stoliarchuk

HTML

<input type="range" id="range-1" step="10" min="10" max="1000" value="560"> <span id="out-1">1</span> <br>
<button onclick="newfunction()">New value</button>
<hr>
<div id="plus">
  <input type="number" value="44" name="one" id="plusone">
  +
  <input type="number" value="2" name="two" id="plustwo">
  <input type="button" onclick="mathplus()" value="=">
  <input type="text" id="resultplus" disabled value="0" >
</div>

<br>
<div id="min">
  <input type="text" name="one" id="plus">
  -
  <input type="text" name="two">
  <input type="button" value="=">
  <input type="text" disabled value="0" name="result">
</div> <br>
<div id="mn">
  <input type="text" name="one" id="plus">
  *
  <input type="text" name="two">
  <input type="button" value="=">
  <input type="text" disabled value="0" name="result">
</div>
<script>
function newfunction(){
  var range1 = document.getElementById("range-1").value;
  document.getElementById("out-1").innerHTML = range1;
}

function mathplus(){
  var plusone = document.getElementById("plusone").value,
  plustwo = document.getElementById("plustwo").value,
  result = (plusone + plustwo);

  document.getElementById("resultplus").value = result;
}
</script>