JSFiddle - React, Tailwind, and code Playground

HTML

<form class="full-width-slider">
    <label for="slider-12" class="ui-hidden-accessible">Slider:</label>
    <input type="range" name="slider-12" id="slider-12" min="0" max="100" value="0" step="20"/>
    <label id="slider-value">0</label>
</form>

CSS

/* Hide the number input */

.full-width-slider .ui-slider-track {
    margin-left: 15px;
}

.full-width-slider input.ui-slider-input {
    display: none;
}

JavaScript

setSliderTicks();

function setSliderTicks() {
    var $slider =  $('#slider');
    var max =  $slider.slider("option", "max");    
    var min =  $slider.slider("option", "min");    
    var spacing =  100 / (max - min);

    $slider.find('.ui-slider-tick-mark').remove();
    for (var i = 0; i < max-min ; i++) {
        $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) +  '%').appendTo($slider); 
     }
}


$( "#slider-12" ).slider().change(function() {
    $('#slider-value').text($('#slider-12').val());
});