<?php require_once '../lib/Kendo/Autoload.php'; $slider = new \Kendo\UI\Slider('slider'); $slider->attr('class', 'temperature') ->change('sliderOnChange') ->slide('sliderOnSlide') ->min(0) ->max(30) ->smallStep(1) ->largeStep(10) ->value(18); $rangeslider = new \Kendo\UI\RangeSlider('rangeslider'); $rangeslider->attr('class', 'humidity') ->change('rangeSliderOnChange') ->slide('rangeSliderOnSlide') ->min(0) ->max(10) ->smallStep(1) ->largeStep(2) ->tickPlacement('both'); ?> <div class="demo-section k-content"> <ul id="fieldlist"> <li> <label>Temperature</label> <?= $slider->render() ?> </li> <li> <label>Humidity</label> <?= $rangeslider->render() ?> </li> </ul> </div> <div class="box"> <h4>Console log</h4> <div class="console"></div> </div> <script> function sliderOnSlide(e) { kendoConsole.log("Slide :: new slide value is: " + e.value); } function sliderOnChange(e) { kendoConsole.log("Change :: new value is: " + e.value); } function rangeSliderOnSlide(e) { kendoConsole.log("Slide :: new slide values are: " + e.value.toString().replace(",", " - ")); } function rangeSliderOnChange(e) { kendoConsole.log("Change :: new values are: " + e.value.toString().replace(",", " - ")); } </script> <style> #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>