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/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<div id="sliderWrapper">
   <input id="slider" />
</div>

JavaScript

$(document).ready(function() {
    function createSlider(min, max) {
         return $("#slider").kendoSlider({
             min: min,
             max: max,
             smallStep: 1,
             largeStep: 1
         });       
    }                
    
    var data = [{
            "value": 1
        }, {
            "value": 2
        }, {
            "value": 3
        }, {
            "value": 4
        }, {
            "value": 5
        }],
        slider;
    
     var dataSource = new kendo.data.DataSource({
         data: data,
         serverAggregates: true;
         aggregate: [{
             field: "value",
             aggregate: "max"
         }, {
             field: "value",
             aggregate: "min"
         }],
         change: function(e) {
             var aggregates = dataSource.aggregates(),
                 min = aggregates.value.min,
                 max = aggregates.value.max;
             
             if (slider) {
                 // Remove the current slider
                 $("#sliderWrapper").empty();
                 $("#sliderWrapper").append("<input id='slider' />");
             }
             
             slider = createSlider(min, max);
         }
     });
    
     dataSource.read();
     // Change the data of the dataSource
     data[4].value = 8;
     dataSource.read();
});