Kendo UI + Knockout - slider

Demonstrates the use of the kendoSlider binding.

by RedF

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://knockoutjs.com/js/knockout-2.2.0.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<h1>Binding a Kendo UI slider using Knockout </h1>
<h2>Using just the default option</h2>
<input data-bind="kendoSlider: rank" />
<span data-bind="text: rank"></span>

<hr/>
<div>
   <label class="checkbox">
       <input type="checkbox" data-bind="checked: secondVisible" />
       Second slider visible
    </label> 
</div>

<hr/>
<div data-bind="visible: secondVisible">
<h2>Passing multiple options</h2>
<input data-bind="kendoSlider: { value: weight, enabled: enabled, min: 0, max: 100 }" />
</div>

<hr/>

<div>
   <label class="checkbox">
       <input type="checkbox" data-bind="checked: enabled" />
       Enabled
    </label> 
</div>

<div>
    <input class="input-mini" type="text" data-bind="value: weight" placeholder="Enter a weight...">
</div>

CSS

h1 { font-size: 1.5em; }
h2 { font-size: 1.25em; }

JavaScript

//simple view model to bind against our widget
var viewModel = {
    secondVisible: ko.observable(false),
    rank: ko.observable(2),
    weight: ko.observable(60),
    enabled: ko.observable(true),    
};

ko.applyBindings(viewModel);