JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">


<div id="slider-size">
<div class="slider"></div>
</div>
<div class="rsize"></div>
<div class="rsize2"></div>

<div class="wrapper_around_parameters">
<input class="step1" value="1W">
<input class="step1" value="2W">
<input class="step1" value="3W">
<input class="step1" value="4W">
<input class="step1" value="5W">
<input class="step1" value="6W">
<input class="step1" value="12W">
<input class="step1" value="14W">
<input class="step1" value="16W">
<input class="step1" value="18W">
<input class="step1" value="20W">
</div>

CSS

body {
    padding: 50px;
}

input.step1.selected{
  background:#333;
  color:#fff;
}

JavaScript

var sizes = ["1W","2W","4W","6W","8W","10W","12W","14W","16W","18W","16W","18W","20W"];
$("#slider-size .slider").slider({
 	range: true,
  min: 0,
  max: sizes.length - 1,
  //step: 1,
  values: [sizes[0], sizes.length],
  slide: function(event, ui) {
  	
    //Vaja countida mitu elementi on slideris
    
    
    // Make sure first handle doesn't go over 50
    if ( ui.value == ui.values[0] && ui.value > 5) {
      return false;
    }
    // Make sure second handle doesn't go below 51
    if ( ui.value == ui.values[1] && ui.value < 6 ) {
      return false;
    }   
    $('input.step1').css('border', '0');
    $( "input.step1" ).removeClass('selected');
    //get two handles
    var value_first = ui.values[0]
    var value_comb = sizes[value_first];
    var value_second = ui.values[1]
    var value_comb_second = sizes[value_second];
    
    var index_1 = $("input[value="+value_comb+"]").index();
    var index_2 = $("input[value="+value_comb_second+"]").index();
    console.log(index_1);
		console.log(index_2);
    $( "input.step1" ).slice( index_1, index_2 ).addClass('selected');
    
    //get selected range
    $("input[value="+value_comb+"]").addClass('selected');
    $("input[value="+value_comb_second+"]").addClass('selected');
    
    $(".rsize").text(value_comb);
    $(".rsize2").text(value_comb_second);
  }
});