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

function checkvals() {

    var threshold = 25;

    var $labels = $('#slider .sliderLegendNum:visible');

    var l = $labels.length;

    var fst = $labels.eq(l - 2).width();
    var nxt = $labels.eq(l - 1).width();

    var first = $labels.eq(l - 2).offset().left + fst;
    var second = $labels.eq(l - 1).offset().left;

    var dist = (second - first) + (fst / 2) + (nxt / 2);

    if (dist <= threshold) {
        var $labels = $('#slider .sliderLegendNum:visible');
        var c = 0;
        $labels.each(function () {
            if (c++ % 2) {
                $(this).hide();
            }
        });
        checkvals();
    } else {
        return true;
    }
}

$("#slider").slider({
    value: 4,
    min: 1,
    max: 35,
    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);
    }
    
});
checkvals();