<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
$slider = new \Kendo\UI\Slider('slider');
$slider->attr('class', 'temperature')->min(0)->max(30)->smallStep(1)->largeStep(10)->value(18);
echo $slider->render();
?>
<br/><br/><br/>
<?php
$rangeslider = new \Kendo\UI\RangeSlider('rangeslider');
$rangeslider->attr('class', 'humidity')->min(0)->max(10)->smallStep(1)->largeStep(2)->tickPlacement('both');
echo $rangeslider->render();
?>
<script>
$(document.body).keydown(function(e) {
if (e.altKey && e.keyCode == 87) {
$(".temperature .k-draghandle")[0].focus();
} else if (e.altKey && e.keyCode == 81) {
$(".humidity .k-draghandle").first()[0].focus();
}
});
</script>
<ul class="keyboard-legend" style="padding-top: 25px">
<li>
<span class="button-preview">
<span class="key-button leftAlign">Alt</span>
+
<span class="key-button">W</span>
</span>
<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div id="climateCtrl">
<?php
$slider = new \Kendo\UI\Slider('slider');
$slider->attr('class', 'temperature');
echo $slider->render();
$rangeslider = new \Kendo\UI\RangeSlider('rangeslider');
$rangeslider->attr('class', 'humidity');
echo $rangeslider->render();
?>
</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);
}
},