JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<input id="slider" class="sliderClass" />

CSS

.sliderClass {
    margin: 20px;
}

JavaScript

var slider = jQuery("#slider").kendoSlider({
    increaseButtonTitle: "Right",
    decreaseButtonTitle: "Left",
    showButtons: true,
    min: 1,
    max: 4,
    largeStep: 1,
    tooltip: {
        enabled: false
    }
});

var steps = {};
steps[0] = 'P';
steps[1] = 'O';
steps[2] = 'G';
steps[3] = 'I';

var sliderItems = slider.siblings(".k-slider-items");
console.log(sliderItems);

$.each(steps, function(index, value){
    var item = sliderItems.find("li:eq("+ (index) +")");
    item.attr("title", value);
    item.find("span").text(value);
});