All Components

Slider / Events

Console log

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Events</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="demo-section k-content"> 
    <ul id="fieldlist"> 
     <li> <label>Temperature</label> <input id="slider" class="temperature"> </li> 
     <li> <label>Humidity</label> 
      <div id="rangeslider" class="humidity"> 
       <input> 
       <input> 
      </div> </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(",", " - "));
                }

                $(document).ready(function() {
                    $("#slider").kendoSlider({
                        change: sliderOnChange,
                        slide: sliderOnSlide,
                        min: 0,
                        max: 30,
                        smallStep: 1,
                        largeStep: 10,
                        value: 18
                    });

                    $("#rangeslider").kendoRangeSlider({
                        change: rangeSliderOnChange,
                        slide: rangeSliderOnSlide,
                        min: 0,
                        max: 10,
                        smallStep: 1,
                        largeStep: 2,
                        tickPlacement: "both"
                    });
                });
            </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> 
  </div>   
 </body>
</html>