Kendo UI

jQuery + Kendo UI + MockJax

by burkeholland

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="container">
    <div id="slider1"></div>
    <div id="slider2"></div>
    <div id="slider3"></div>
    <div id="slider4"></div>
</div>

CSS

#container {
    width: 100%;
    margin: 20px 0px 0px 20px;
}

#container > div {
    margin: 10px;
}

JavaScript

(function() {
    
    $("#slider1").kendoSlider({
        max: 100,
        min: 1
    });
    
    $("#slider2").kendoSlider({
        orientation: "vertical",
        max: 100,
        min: 10,
        largeStep: 20,
        smallStep: 10
    });
    
    $("#slider3").kendoSlider({
        showButtons: false
    });
    
    $("#slider4").kendoSlider({
        enabled: false,
        orientation: "vertical"
    });
    
})()