JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://refreshless.com/nouislider/source/jquery.nouislider.css">
<script src="http://refreshless.com/nouislider/source/jquery.nouislider.js"></script>
<div id="slider"></div>

CSS

#slider {
    background: #DDD;
    border: 1px solid #BFBFBF;
    padding-right: 40px;
}
.noUi-base {
    border: 0;
    height: 38px;
}
.noUi-handle {
    opacity: 0.4;
    margin: -3px 0 0 -2px;
}

JavaScript

function tapState( target ){
    target.addClass('noUi-state-tap');    
    setTimeout(function(){
         target.removeClass('noUi-state-tap')
    }, 300);
}

var options = {
     start: 1
    ,range: [1,7]
    ,handles: 1
    ,step: 1
    ,serialization: {
        to: [false, false],
        resolution: 1
    }
};

// Initialize the slider.
$('#slider').noUiSlider(options);

// When clicked on the slider edge, trigger a tap,
// and set the slider value.
$('#slider').click(function(){
    tapState( $(this).val(7) );
    
});

// Make sure a tap on the slider doesn't propagate.
$('#slider').find('.noUi-base').click(function(e){
    alert('tap');
   e.stopPropagation();
});