// Normal method $("#slider1").kendoSlider({ min: 0, max: 14, smallStep: 1, largeStep: 14, showButtons: false, value: 7 }); // Value binding kendo.bind($("#form2"), kendo.observable({ changeSlider: function (event) { console.log(event.value); } }));
<form id="form1"> <h3>Normal method</h3> <input id="slider1" type="text" /> </form> <form id="form2"> <h3>Value binding</h3> <input data-bind="events: { change: changeSlider, slide: changeSlider }" data-large-step="0.02" data-max="0.14" data-min="0" data-role="slider" data-show-buttons="false" data-small-step="0.01" data-tick-placement="bottomRight" id="slider2" type="text" value="0.07" /> </form>
body { font-family: sans-serif; } #form1 { border-bottom: 1px solid silver; margin-bottom: 24px; padding-bottom: 24px; }