JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<div id="sliders">
<input type="number" id="valueSMN" min="0.02" value="10">
  <label class="range1" for="range1"></label><input id="range1" type="range" min="3" max="100" value="0"/><br>
<input type="text" id="total" value="0">
</div>

JavaScript

const val = document.getElementById('valueSMN').value
document.querySelector("#sliders").addEventListener("change", function(e){
    var cur=event.target;
    document.querySelector("."+cur.id).textContent=cur.value + '%';
    document.querySelector("#total").value=(document.querySelector("#range1").value*val/100)-0.01;
})