JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Rating">
    <div class="Rating-slider"></div>
    <ol class="Rating-labels">
        <li class="Rating-labels-label" data-stars="1" data-description="It just wasn't what you expected or wanted.">Bad</li>
        <li class="Rating-labels-label" data-stars="2" data-description="It was close, but something about it turned you off.">Poor</li>
        <li class="Rating-labels-label" data-stars="3" data-description="It was want you wanted, but you're not thrilled with it.">Ok</li>
        <li class="Rating-labels-label" data-stars="4" data-description="It was exactly what you needed and works great.">Good</li>
    </ol>
</div>

CSS

.Rating-labels,
.Rating-stars {
    overflow: hidden;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.Rating-labels-label,
.Rating-stars-rating {
    float: left;
    width: 25%;
        text-align: center;
}

.Rating-slider {
    margin: 0 12.5%;
}

JavaScript

$('.Rating').each(function () {
    var $this = $(this),
        $labels = $this.find('.Rating-labels'),
        $slider = $this.find('.Rating-slider'),
        $stars = $('<ol/>').addClass('Rating-stars'),
        $description = $('<p/>').addClass('Rating-description');
    
    $labels.find('.Rating-labels-label').each(function () {
        var $rating = $('<li/>').addClass('Rating-stars-rating'),
            amount = $(this).data('stars');
        
        switch(amount) {
            case 1:
                $rating.addClass('one-star');
                break;
            case 2:
                $rating.addClass('two-star');
                break;
            case 3:
                $rating.addClass('three-star');
                break;
            case 4:
                $rating.addClass('four-star');
                break;
        }
        
        $rating.html(amount+ ' star' + (amount > 1 ? 's' : ''));
        
        $rating.appendTo($stars);
    });
    
    $this.prepend($stars).append($description);
    
    function updateLabels(event, ui) {
        var rating = (ui ? ui.value : 1),
            $label = $labels.find('[data-stars="'+rating+'"]');
        console.log($label);
        $description.html('<strong>Meaning:</strong> ' + $label.data('description'));
    }
    
    $slider.slider({
        value:1,
        min: 1,
        max: 4,
        range: false,
        slide: updateLabels
    });
    
    updateLabels();
});