JSFiddle - React, Tailwind, and code Playground

HTML

<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="12" min="0" max="100" />

CSS

.tick {
    width: 1px;
    background-color:#999999;
    height:5px;
    position:absolute;
    bottom:0px;
}

#number0{
     margin-left:0%;   
    
}

#percent25, #number25{
     margin-left:12%;   
    
}
#percent50, #number50{
     margin-left:50%;   
    
}
#percent75, #number75{
     margin-left:75%;   
    
}

#number100{
     margin-left:100%;   
    
}

.number {
    position:absolute;
    top:18px;
    left:-5px;
    bottom:0px;
    font-size:10px;
    color:#999999;
}

JavaScript

$(document).ready(function() {
$("div.ui-slider").append("<div class='tick' id='percent25'></div><div class='tick' id='percent50'></div><div class='tick' id='percent75'></div><div class='number' id='number0'>0</div><div class='number' id='number25'>25</div><div class='number' id='number50'>50</div><div class='number' id='number75'>75</div><div class='number' id='number100'>100</div>");
    
});