JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#slider > div {
  position: absolute;
  text-align: center;
  margin-top: 20px;
  transform: translateX(-50%);
}


/* below is not necessary, just for style */

#slider {
  width: 50%;
  margin: 2em auto;
}

JavaScript

$("#slider").slider({
  value: 4,
  min: 1,
  max: 50,
  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="sliderLegendNumber">' + (i + 1) + '</div></div>').css('left', (i / vals * 100) + '%');
    $(this).append($el);
  }
});

$('#slider .sliderLegend').slice(1).each(function() {
  var left = $(this).position().left,
    $prev = $(this).prevAll(':has(.sliderLegendNumber)').first(),
    prevRight = $prev.position().left + $prev.width(),
    $item = $(this).is(':last-child') ? $prev : $(this);

  if (left < prevRight + 6) {
    $item.find('.sliderLegendNumber').remove();
  }
});