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.min.js"></script>
<div id="slider"></div>
<input>

CSS

#slider { margin: 50px }

JavaScript

function roundAt4K ( value ){
    return Number(value).toFixed(value >= 4000 ? 0 : 2);
}

$("#slider").noUiSlider({
    range: {
        'min': [ 0 ],
        '10%': [ 500, 500 ],
        '50%': [ 4000, 1000 ],
        'max': [ 10000 ]
    },
    start: 6,
	format: wNumb({
		edit: roundAt4K
	})
});

$("#slider").Link().to($('input'));