ui-slider

ui-slider

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<!-- block of content -->
<div class="items">
  <!-- first-block -->
  <div class="slider-content active">
    <span>lorem ipsum:</span>
    <span class="price">30 000</span>
  </div>

  <!-- second-block -->
  <div class="slider-content">
    <span>lorem ipsum:</span>
    <span class="price">30 000</span>
  </div>

  <!-- third-block -->
  <div class="slider-content">
    <span>lorem ipsum:</span>
    <span class="price">30 000</span>
  </div>
  
  <!-- fourth-block -->
  <div class="slider-content">
    <span>lorem ipsum:</span>
    <span class="price">30 000</span>
  </div>  
  
  <!-- fifth-block -->
  <div class="slider-content">
    <span>lorem ipsum:</span>
    <span class="price">30 000</span>
  </div>    
</div>

<div id="range-slider"></div> <!-- ui jquery range slider-->

CSS

.slider-content {
  display:inline-block;
  width: 19%;
}

.active {
  color: red;
}
#range-slider {
  //your style
}
#range-slider .ui-slider-range { 
  background: #ef2929; 
  height:30px;
}
#range-slider .ui-slider-handle { 
  border-color: #ef2929; 
  height:30px;
}
#range-slider .ui-state-active {
  //your style
}
#range-slider .ui-state-hover {
  //yoru style
}

JavaScript

$("#range-slider").slider({
  max: 20,
  min: 4,
  step: .2,
  change: function (event, ui) {
    $('.items div').removeClass('active');
    $('.items div:nth-child(' + ui.value / $(this).slider("option", "step") + ')').addClass('active');
  },
  slide: function(event, ui) {
    $('.items div').removeClass('active');
    $('.items div:nth-child(' + ui.value / $(this).slider("option", "step") + ')').addClass('active');  
  }
});