<?php require_once '../lib/Kendo/Autoload.php'; ?> <div class="box wide"> <div class="box-col"> <h4>Slider API Functions</h4> <ul class="options"> <li> <button class="k-button" id="enableSlider">Enable</button> <button class="k-button" id="disableSlider">Disable</button> </li> <li> <input type="text" id="newValue" value="1" class="k-textbox" /> <button class="k-button" id="setSliderValue">Set value</button> </li> <li> <button class="k-button" id="getSliderValue">Get value</button> </li> </ul> </div> <div class="box-col"> <h4>RangeSlider API Functions</h4> <ul class="options"> <li> <button class="k-button" id="enableRangeSlider">Enable</button> <button class="k-button" id="disableRangeSlider">Disable</button> </li> <li> <input type="text" id="startValue" value="1" class="k-textbox" /> <button class="k-button" id="setStartValue">Set selection start</button> | <input type="text" id="endValue" value="1" class="k-textbox" /> <button class="k-button" id="setEndValue">Set selection end</button> </li> <li> <button class="k-button" id="getRangeSliderValue">Get value</button> </li> </ul> </div> </div> <div class="demo-section k-content"> <ul id="fieldlist"> <li> <label>Temperature</label> <?php $slider = new \Kendo\UI\Slider('slider'); $slider->attr('class', 'temperature'); echo $slider->render(); ?> </li> <li> <label>Humidity</label> <?php $rangeslider = new \Kendo\UI\RangeSlider('rangeslider'); $rangeslider->attr('class', 'humidity'); echo $rangeslider->render(); ?> </li> </ul> </div> <script> $(document).ready(function() { var slider = $("#slider").data("kendoSlider"), rangeSlider = $("#rangeslider").data("kendoRangeSlider"), setValue = function(e) { if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) { var value = parseInt($("#newValue").val(), 10); if (isNaN(value) || value < 0 || value > 10) { alert("Value must be a number between 0 and 10"); return; } slider.value(value); } }, setStartValue = function(e) { if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) { var startValue = parseInt($("#startValue").val(), 10); if (isNaN(startValue) || startValue < 0 || startValue > 10) { alert("Value must be a number between 0 and 10"); return; } var endValue = getValue()[1]; rangeSlider.value([startValue, endValue]); } }, setEndValue = function(e) { if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) { var startValue = getValue()[0]; var endValue = parseInt($("#endValue").val(), 10); if (isNaN(endValue) || endValue < 0 || endValue > 10) { alert("Value must be a number between 0 and 10"); return; } rangeSlider.values(startValue, endValue); } }; $("#getSliderValue").click(function() { alert(slider.value()); }); $("#enableSlider").click(function() { slider.enable(); }); $("#disableSlider").click(function() { slider.disable(); }); function getValue() { return rangeSlider.value(); } $("#setSliderValue").click(setValue); $("#newValue").keypress(setValue); $("#setStartValue").click(setStartValue); $("#startValue").keypress(setStartValue); $("#setEndValue").click(setEndValue); $("#endValue").keypress(setEndValue); $("#getRangeSliderValue").click(function() { alert(getValue()); }); $("#enableRangeSlider").click(function() { rangeSlider.enable(); }); $("#disableRangeSlider").click(function() { rangeSlider.disable(); }); }); </script> <style> .options .k-textbox { width: 40px; margin-left: 0; } .k-button { min-width: 80px; } #fieldlist { margin: 0 0 -2em; padding: 0; text-align: center; } #fieldlist > li { list-style: none; padding-bottom: 2em; } #fieldlist label { display: block; padding-bottom: 1em; font-weight: bold; text-transform: uppercase; font-size: 12px; color: #444; } </style>