JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.0.0/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.0.0/nouislider.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="create-sliders"></div> 
<div class="create-sliders"></div> 
<div class="create-sliders"></div>

CSS

.create-sliders{
  margin:60px;

}

.noUi-value{
 cursor:pointer; 
}

JavaScript

var sliders = $('.create-sliders');
for ( var i = 0; i < sliders.length; i++ ) {

    noUiSlider.create(sliders[i], {
        start: [ 0 ],
        range: {
            // start at 0 and end at 1000
            min: 0,
            max: 180
        },
        behaviour: 'snap',  
        connect: [true, false],
        //set values that are clickable
        pips: { mode: 'values', values: [0, 30, 60, 90, 120, 150, 180] 
        },
    });
    sliders[i].noUiSlider.on('slide', addValues);
  
}

$('.noUi-value').click(function(){
	  var selectedSliderIndex = $(this).parents('.create-sliders').index();
    var value = Number($(this).data('value'));
    sliders[selectedSliderIndex].noUiSlider.set(value);
});

function addValues(){
    var allValues = [];
}