JSFiddle - React, Tailwind, and code Playground

by leongersen

HTML

<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 id="lp-slider"></div>
<div id="kwh"></div>

JavaScript

jQuery("#lp-slider").noUiSlider({
	start: [ 30000 ],
	connect: "lower",
	range: {
		'min': [ 2000,100 ],
		'20%': [ 20000,1000 ],
		'40%': [ 30000,2000 ],
		'60%': [ 50000,2000 ],
		'80%': [ 70000,3000 ],
		'max': [ 100000 ]
	}
});

// Link value to input
jQuery("#lp-slider").Link('lower').to(jQuery('#kwh'), null, wNumb({
    decimals: 0
}));