JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="computers">
  <div class="system1" data-price="299">div1 - 299</div>
  <div class="system2" data-price="599">div2 - 599</div>
  <div class="system3" data-price="1099">div3 - 1099</div>
</div>
<div id="slider-range"></div>

CSS

#slider-container {
  width: 350px;
  margin-left: 30px;
}

JavaScript

$(function() {
  $("#slider-container").slider({
    range: 'min',
    min: 0,
    max: 10,
    value: 8,
    slide: function(event, ui) {
      var curValue = ui.value;
      var tooltip_Date = '<div class="tooltip_Date"><div class="tooltip_Date-inner">' + curValue + ' years</div><div class="tooltip_Date-arrow"></div></div>';
      $(this).find('.ui-slider-handle').html(tooltip_Date);
      $("#number_repayments").html(curValue);
      
       if(ui.value > 0 && ui.value < 3) {
        $('.system1').css('display', 'block');
        $('.system2, .system3').css('display', 'none');
  } else if(ui.value > 4 && ui.value < 5) {
        $('.system2').css('display', 'block');
        $('.system3, .system1').css('display', 'none');
  } else if(ui.value > 6 && ui.value < 7) {
        $('.system3').css('display', 'block');
        $('.system2, .system1').css('display', 'none');
  }

    },
    create: function(event, ui) {
      var curValue = ui.value || 8;
      var tooltip_Date = '<div class="tooltip_Date"><div class="tooltip_Date-inner">' + curValue + ' years</div><div class="tooltip_Date-arrow"></div></div>';
      $(this).find('.ui-slider-handle').html(tooltip_Date);
      $("#number_repayments").html(curValue);
    }
  });
});

f