Add Numbers Under Uislider

I have a UISlider I implemented with JQuery UI. I want to add a legend under the slider showing the numbers. I followed this answer which showed how to implement that, placing then

Solution 1:

You could iterate over all the .sliderLegend elements (except the first one), and compare the element's left position with the closest previous element's right position.

If the right side of the closest previous element is greater than the left side of the current element, then you know that they overlap, and you can remove the element you are currently iterating over.

In the example below, the condition is left < prevRight + 6, so there is a 6px buffer. Just adjust that number accordingly to how much space you want between the numbers.

Updated Example

$('#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();
  }
});

In addition, part of the problem you were encountering was that all the children div elements had a fixed width of 20px. Due to this, you couldn't accurately calculate the offset left position of the element because the text would overflow. To work around this, I removed the fixed width and added transform: translateX(-50%) in order to center the elements horizontally.

Updated Example

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

A range of 1-50 would now generate the following:

A range of 1-100 would generate the following:

Additionally, if you would like to remove the lines as well, remove the entire element rather than just the number: