JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://refreshless.com/nouislider/source/jquery.nouislider.css">
<script src="http://refreshless.com/nouislider/source/jquery.nouislider.js"></script>
<div id="slider"></div>

<span id="val"></span>

JavaScript

var Link = $.noUiSlider.Link;

var range = {
 'min': 0,
  '3%': 44900,
  '6%': 59500,
 '10%': 69900,
 '13%': 79900,
 '16%': 89900,
 '20%': 99500,
 '23%': 109000,
 '26%': 114900,
 '30%': 120000,
 '33%': 129900,
 '36%': 137500,
 '40%': 144900,
 '43%': 152500,
 '46%': 159900,
 '50%': 169900,
 '53%': 180600,
 '56%': 194900,
 '60%': 208980,
 '63%': 224500,
 '66%': 239000,
 '70%': 255000,
 '73%': 279900,
 '76%': 299900,
 '80%': 329000,
 '83%': 359900,
 '86%': 399300,
 '90%': 467380,
 '93%': 595000,
 '96%': 795000,
 'max': 800000
};

$("#slider").noUiSlider({
    range: range,
    start: 0,
    snap: true,
    serialization: {
        lower: [ new Link({ target: $("#val") }) ]
    }    
});