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;
}

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

JavaScript

var niveau = 0;
var vitesse = 3;

document.getElementById("jauge").onchange = function(){
    //valeur saisie
    var niveauObjectif = this.value;
    var contenant = document.getElementById("contenant");
    var contenu = document.getElementById("contenu");
    if(niveauObjectif >100 || niveauObjectif <0){
        alert('Le niveau doit être compris entre 0 et 100!');
        this.value=0;
        return;
    }
    
    var anim = function(){                
        niveau  += ( niveau  < niveauObjectif ? 1 : -1 );
        contenu.style.height = parseInt(niveau / 100 * contenant.clientHeight)+"px";
        document.getElementById("pourcentage").innerText = parseInt(niveau)+"%";    
        if(niveau != niveauObjectif){
            setTimeout(anim, parseInt(100/vitesse));
        }
    };
    anim();
}