JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="computers">
  <div class="system1" data-price="299">
    Option 1
  </div>
  <div class="system2" data-price="599">
  Option 2
  </div>
  <div class="system3" data-price="1099">
    Option 3
  </div>
   <div class="system4" data-price="1099">
    Option 4
  </div> 
</div>
<div id="slider-range"></div>

CSS

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

JavaScript

$(function() {
  $("#slider-container").slider({
    range: 'min',
    min: 4,
    max: 10,
    value: 8,
    step: 2,
    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 < 5) {
        $('.system1').css('display', 'block');
        $('.system2, .system3, .system4').css('display', 'none');
  } else if(ui.value < 7) {
        $('.system2').css('display', 'block');
        $('.system3, .system1, .system4').css('display', 'none');
  } else if(ui.value < 9) {
        $('.system3').css('display', 'block');
        $('.system2, .system1, .system4').css('display', 'none');
  } else if(ui.value > 9) {
        $('.system4').css('display', 'block');
        $('.system2, .system1, .system3').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