JSFiddle - React, Tailwind, and code Playground
HTML
<div class="ui-field-contain">
<div id="slider-1"></div>
<div id="hint"></div>
</div>
JavaScript
var text = {
1: "bad",
2: "okay",
3: "better",
4: "great",
5: "awesome"
};
var $sliderText = $('#hint');
var refresh = function (e) {
$sliderText.text(text[$('#slider-1').slider('value')]);
};
$(function () {
$('#slider-1').slider({
min: 1,
max: 5,
slide: refresh,
change: refresh
});
refresh();
});