Could someone help me to add a moving value bubble in my slider?

Question

I want to add a value bubble in my slider but no tutorials helped me do it myself since I'm new to HTML and CSS.

I prefer the position of the value to be just above the invisible thumb, and move it along with the thumb. But if such a moving bubble is too much work, I can also adjust with a static bubble on the left side of the slider.

I also want to be able to control the color of the value text and bubble.

Following is my slider;

<div class = "container">    
    <input type="range"     
    min="0"     
    max="25"     
    step="any"     
    value="%VOLM"     
    id="volm">    
</div>    
    
<style>    
    .container{   
    display:flex;   
    width:100%;   
    padding-top:2;   
    height: fit-content;}   
   
#volm{   
    position: relative;   
    margin-top: 5px;   
    width:153px;  
    border-radius: 3px;   
    height: 5px;   
    -webkit-appearance: none;}   
   
input::-webkit-slider-runnable-track {   
    -webkit-appearance: none;   
    background: linear-gradient(to right,#D4C81C, #FF0000);  
    position: relative;   
    box-sizing: border-box;   
    width: 100%;   
    height: 5px;   
    border-radius: 3px;   
    overflow: hidden;}   
    
input::-webkit-slider-thumb {   
    position: relative;   
    left: initial;   
    bottom: 10px;   
    -webkit-appearance: none;   
    width: 0px;   
    height: 20px;   
    box-shadow: 330px 0 0 330px #DEDEDE, inset 0 0 0 40px #DEDEDE;   
    margin-top: 5px;}   
</style>