JSFiddle - React, Tailwind, and code Playground

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>

<span></span>

CSS

#slider { margin: 50px; }

JavaScript

$("#slider").noUiSlider({
    range: { min: 0, max: 5 },
    start: 0,
    format: wNumb({
        decimals: 0 
    })
});

var strings = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo'];

$("#slider").Link().to($("span"), function( value ){
       $(this).html(strings[Number(value)]);
});