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

<span id="read"></span>

JavaScript

$("#slider").noUiSlider({
  connect: true,
  behaviour: 'drag-fixed',
  start: [ 50000, 70000 ],
  range: {
    'min': [    50000,   10000 ],
    '20%': [   100000,   10000 ],
    '40%': [   250000,   25000 ],
    '60%': [   500000,   50000 ],
    '80%': [  1000000,  250000 ],
    'max': [  4000000 ]
  },
});

$("#slider").on('slide', function( event, values ) {
    $("#read").html(+values[1] - +values[0]);
});