JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider"></div>

CSS

#slider > div {
    position: absolute;
    width: 20px;
    margin-left: -10px;
    text-align: center;
    margin-top: 20px;
}
/* below is not necessary, just for style */
 #slider {
    width: 50%;
    margin: 2em auto;
}

JavaScript

$("#slider").slider({
    value: 4,
    min: 1,
    max: 15,
    step: 1
})
    .each(function () {
    var opt = $(this).data().uiSlider.options;
    var vals = opt.max - opt.min;
    
    for (var i = 0; i <= vals; i++) {
        var el = $('<div class="sliderLegend"><div class="sliderLegendMark">|</div><div class="sliderLegendNum" id="legendNum' + i + '">' + (i + 2) + '</div></div>').css('left', (i / vals * 100) + '%');
        $('#slider').append(el);

        if (i !== 0) {
            var prevLegendNum_offsetLeft = $('#legendNum' + i).closest('.sliderLegend').find('.sliderLegendNum').offset().left

            var distance = $('#legendNum' + i).offset().left - prevLegendNum_offsetLeft;
            console.log(distance);

            if (distance <= 35) {
                $('#legendNum' + i).remove();
            }
        }
    }

});