JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" id="jauge" value="0"/>
<div id="contenant">
    <div id="contenu"></div>
    <span id="pourcentage">0 %</span>
</div>

CSS

body { 
    margin: 20px;
    text-align:center;
}

#contenant { 
    border: 5px ridge #333; 
    box-shadow: 0 0 30px #ccc;
    height: 500px;
    width:100px;
    margin: 30px auto;
    position: relative;
}

#contenu {
    position: absolute;
    bottom: 0;
    left:0;
    width: 100px;
    background:red;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
}

#pourcentage {
    position: absolute;
    top:225px;
    left: 0;
    color:black;
    width: 100px;
    text-align:center;
    font-size: 24px;
    font-weight: bold;
}

JavaScript

document.getElementById("jauge").onchange = function(){
    //valeur saisie
    var niveau = this.value;
    var contenant = document.getElementById("contenant");
    var contenu = document.getElementById("contenu");
    if(niveau>100 || niveau <0){
        alert('Le niveau doit être compris entre 0 et 100!');
        this.value=0;
        return;
    }

    contenu.style.height = parseInt(niveau/100 * contenant.clientHeight)+"px";
    
    var total = niveau * pourcentage / 100;
    document.getElementById("pourcentage").innerText = parseInt(niveau)+"%";    
}