JSFiddle - React, Tailwind, and code Playground

by CHAITANYA K

HTML

<link rel="stylesheet" href="http://refreshless.com/assets/base.css">
<link rel="stylesheet" href="http://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css">
<script src="http://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>
<div class="example">
<div id="html5"></div>
<input type="number" min="0" max="40" step="1" id="input-select">
<input type="number" min="40" max="50" step="1" id="input-number2">
</div>

JavaScript

// Append the option elements
for ( var i = -20; i <= 40; i++ ){
	$('#input-select').append(
		'<option value="'+i+'">'+i+'</option>'
	);
}
$('#html5').noUiSlider({
	start: [ 10, 30 ],
	connect: true,
	range: {
		'min': 0,
		'max': 40
	}
});
// A select element can't show any decimals
$('#html5').Link('lower').to($('#input-select'), null, wNumb({
	decimals: 0
}));

$('#html5').Link('upper').to($('#input-number'));
$('#html5').Link('upper').to($('#input-number2'));