Kendo Sliders
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.moonlight.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/styles/kendo.web.min.js"></script>
<body>
<h2>Duration</h2>
<div id="duration">
<input />
<input />
</div>
</body>
CSS
.k-label{
display:none;
}
.k-slider-track{
background-color: red;
}
.k-tick-large{
background-color: blue;
}
.k-slider-selection {
background-color: #f0713a;
}
JavaScript
$(document).ready(function() {
$('#duration').kendoRangeSlider({
min: 0,
max: 5,
selectionStart: 1,
selectionEnd: 5,
orientation: "horizontal",
smallStep: 1,
largeStep: 5,
//tickPlacement: 'bottomRight',
// tooltip: {
// template: kendo.template(durationTemplateString)
// }
});
});