JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.css">
<script src="https://raw.githubusercontent.com/leongersen/libLink/master/jquery.liblink.js"></script>
<div style="width: 80%; margin: 0 auto;"><div id="slider-events"></div></div>

JavaScript

$("#slider-events").noUiSlider({
	start: [ 0 ],
	range: {
		'min': [ -10 ],
		'max': [ 10 ]
	}
});

$("#slider-events").on({
	slide: function() {
        var val = $(this).val();
		if (val < 0)
            $(this).css("backgroundColor", "red");
        else if (val > 0)
            $(this).css("backgroundColor", "green");
                        else
            $(this).css("backgroundColor", "#f5f5f5");
	}
});