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="slider1"></div>
<div id="slider2"></div>

CSS

#slider1, #slider2 {
    margin: 50px;
}

.noUi-base {
    border-radius: 10px;
}
.noUi-connect {
     background-image: -webkit-linear-gradient(top, #aeb2b1, #959a99);
}
.noUi-background {
    background: #fff;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.3) inset;   
}

JavaScript

$("#slider1").noUiSlider({
	 range: [20, 50]
	,start: 30
	,handles: 1
	,connect: "upper"
});

$("#slider2").noUiSlider({
	 range: [20, 50]
	,start: 30
	,handles: 1
	,connect: "lower"
});