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.js"></script>
<div id="slider"></div>
<input type="text" id="out">

CSS

#slider { margin: 50px }

JavaScript

$("#slider").noUiSlider({
    range: { min: 1, max: 3 },
    start: 1
});

$("#slider").Link().to($("#out"), function ( v ) {
    $(this).text(['Bad', 'Average', 'Good'][ v - 1]);
}, wNumb({ decimals: 0 }));