Input percent element

by Karmik Patel

HTML

<html>
<head>
    <title>Input Percent</title>
    <link rel="stylesheet" href="style.css">
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>  
<body>
  
  EM Adjusted (Optional)
  <div class="percent_input" id="red_liquid_percent">
     <div class="button_group">
          <i id="up_button" class="fas fa-sort-up"></i>
          <i id="down_button" class="fas fa-sort-down"></i>
      </div>
      <p id="percent_value">0%</p>
  </div>
  <button id='kpBtn' onclick="myfun()">TryMe</button>
</body>
</html>

CSS

.percent_input{
    width: 130px;
    height: 40px;
    border: 1px solid #717171;
    border-radius: 3px;
    font-size: 23px;
    line-height: 40px;
    display: flex;
}
#percent_value {
    display: inline-block;
    margin: 0 0 0 -10px;
}
.button_group{
    display: inline-block;
    width: 20px;
    height: 40px;
    vertical-align: bottom;
}
.button_group i{
    height: 20px;
    font-size: 30px;
    position: relative;
    left: 107px;
}
#down_button{
    position: relative;
    top: -30px;
}

JavaScript

var intervalId;
var upbutton= document.getElementById("up_button");
var downbutton= document.getElementById("down_button");

upbutton.onmousedown = function() {
  intervalId = setInterval(up_percent, 50);
}
upbutton.onmouseup = function() {
  clearInterval(intervalId);
}

downbutton.onmousedown = function() {
    intervalId = setInterval(down_percent, 50);
  }
downbutton.onmouseup = function() {
    clearInterval(intervalId);
}

function up_percent(){
    var percent=document.getElementById("percent_value").innerHTML;
    percent_int = percent.substr(0,percent.length-1);
    percent_int++;
    if(percent_int<=150) document.getElementById("percent_value").innerHTML=percent_int+"%";
}
function down_percent(){
    var percent=document.getElementById("percent_value").innerHTML;
    percent_int = percent.substr(0,percent.length-1);
    percent_int--;
    if(percent_int>=0) document.getElementById("percent_value").innerHTML=percent_int+"%";
}


function myfun(){
alert(document.getElementById("percent_value").innerHTML);
}