<?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 id="climateCtrl">
    <?= $slider->render() ?>
    <?= $rangeslider->render() ?>
</div>
<div class="console"></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>
    #climateCtrl {
        width: 245px;
        height: 167px;
        margin: 30px auto;
        padding: 102px 0 0 156px;
        background: url('../content/web/slider/climateController.png') transparent no-repeat 0 0;
    }
    .humidity {
        margin: 67px 0 0 15px;
        width: 170px;
    }
</style>