JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://refreshless.com/noUiSlider/distribute/nouislider.js?v=900"></script>
<link rel="stylesheet" href="https://refreshless.com/noUiSlider/distribute/nouislider.css">
<div id="slider"></div>

CSS

#slider { margin: 100px; }

.c-18deg-color { background: red; }
.c-22deg-color { background: yellow; }

JavaScript

var slider = document.getElementById('slider');
var classes = ['c-18deg-color', 'c-22deg-color'];

noUiSlider.create(slider, {
	start: [ 4000, 8000, 12000, 16000 ],
	connect: [false, true, true, true, true],
	range: {
		'min': [  2000 ],
		'max': [ 20000 ]
	}
});

var connect = slider.querySelectorAll('.noUi-connect');

for ( var i = 0; i < connect.length; i++ ) {
    connect[i].classList.add(classes[i]);
}