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.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.js"></script>
<div id="slider"></div>

<span id="target"></span>

JavaScript

var slider = document.getElementById('slider');
var target = document.getElementById('target');

var names = ['a', 'b', 'c', 'd'];

noUiSlider.create(slider,{
	start: [ 20000 ],
	step: 1000,
	range: {
		'min': [ 20000 ],
		'max': [ 80000 ]
	},
	format: wNumb({
		decimals: 3,
		thousand: '.',
		suffix: ' (US $)',
	}),
});

slider.link().to(target, function ( value ) {
	$(this).html(names[value]);
});