JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider"></div>
<br>
<div>You selected:
<span id="selectedMonth"></span>
</div>

CSS

#selectedMonth {
    color: #f6931f;
    font-weight: bold;
}

JavaScript

$(function () {
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    $('#slider').slider({
        min: 0,
        max: 11,
        step: 1,
        create: function (event, ui) {
            $('#selectedMonth').text(months[0]);
        },
        slide: function (event, ui) {
            $('#selectedMonth').text(months[ui.value]);
        },
        skin: "round", 
    });
});