JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<body>
    <div id="example">
    <div class="demo-section k-header">
        <div class="box-col" style="width: 300px">
            <h4>Change the value</h4>
            <input data-role="slider"
                   data-min="0"
                   data-max="50"
                   data-small-step="5"
                   data-large-step="10"
                   data-bind="visible: isVisible,
                              enabled: isEnabled,
                              value: selectedNumber,
                              events: { change: onChange }"
                   style="width: 180px">
        </div>
        <div class="box-col console-section">
            <h4>Console</h4>
            <div class="console"></div>
        </div>
    </div>
    <div class="box">
        <div class="box-col" style="width: 300px">
            <h4>Configuration</h4>
            <div>
                <label><input type="checkbox" data-bind="checked: isEnabled">Enable</label>
            </div>
            <div>
                <label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
            </div>
        </div>       
    </div>
</div>

JavaScript

var viewModel = kendo.observable({
        selectedNumber: 0,
        isEnabled: true,
        isVisible: true,
        onChange: function() {
            kendoConsole.log("event :: change (" + this.get("selectedNumber") + ")");
        }
    });
    kendo.bind($("#example"), viewModel);