JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://refreshless.com/noUiSlider/distribute/nouislider.js"></script>
<link rel="stylesheet" href="https://refreshless.com/noUiSlider/distribute/nouislider.min.css">
<div id="slider">

</div>

JavaScript

var range = {min: 0};
var values = [0,25,33,37.5,50,75,100];
for  (var i = 1; i < 7; i++) range[((100/6)*i) + '%'] = values[i];
range.max = 100;

noUiSlider.create(document.getElementById('slider'), {
	range: range,
  start: 0,
	snap: true,
	pips: { mode: 'steps', format: {
  	to: String,
    from: Number
  } }
});