JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<script src="http://refreshless.com/nouislider/files/jquery.nouislider.js"></script>
<div class="fox">
    <div class="noUiSlider" style="width: 240px;float:left;"></div>
</div>

CSS

.noUiSlider,
	.noUiSlider * {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
		box-sizing: border-box;
-webkit-user-select: none;
   -moz-user-select: none;
	-ms-user-select: none;
		display: block;
		cursor: default;
	}
	.noUiSlider {
		position: relative;
	}
	.noUiSlider a {
		position: absolute;
		z-index: 1;
	}
	.noUiSlider a:nth-child(2) {
		background: inherit !important;
	}
	.noUiSlider.vertical a {
		width: 100%;
		bottom: 0;
	}
	.noUiSlider.horizontal a {
		height: 100%;
		right: 0;
	}
.fox .noUiSlider {
		border: 1px solid #908d84;
		border-radius: 3px;
	}
	.fox .noUiSlider.connect a,
	.fox .noUiSlider.connect.lower {
		background: #b2a98f;
	}
	.fox .noUiSlider,
	.fox .noUiSlider.connect.lower a {
		background: #d9d7cb;
		box-shadow: inset 0px 1px 7px #b6b4a8
	}
	.fox .noUiSlider.disabled,
	.fox .noUiSlider.disabled.connect.lower a {
		background: #ccc;
		box-shadow: none;
	}
	.fox .noUiSlider div {
		height: 18px;
		width: 18px;
		border: 1px solid #99968f;
		border-radius: 3px;
		background: #efefe7;
	}
	.fox .noUiSlider.disabled div {
		background: transparent;
	}
	.fox .noUiSlider.horizontal {
		width: 300px;
		height: 10px;
	}
	.fox .noUiSlider.horizontal div {
		margin: -5px 0 0 -9px;
	}
	.fox .noUiSlider.vertical {
		width: 10px;
		height: 300px;
	}
	.fox .noUiSlider.vertical div {
		margin: -9px 0 0 -5px;
	}

JavaScript

$(document).ready(function(){
    $(".noUiSlider").noUiSlider({
       range: [0, 100],
       start: 50,
        connect:'lower',
       handles: 1,
       orientation: "horizontal"
    });
});