Post
Ask Question

Kendo Slider Using jQuery

Introduction

 
Slider controls are widely used in modern websites to zoom the object, indicate the temperature level, and so on. In this blog, you will learn how to implement the kendo rating control using jQuery and how to fetch the values from the control, based on the selection.
 
KendoSlider.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Kendo Slider</title>  
  6.   
  7.   <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.   <script src="https://kendo.cdn.telerik.com/2021.1.119/js/angular.min.js"></script>  
  14.   <script src="https://kendo.cdn.telerik.com/2021.1.119/js/jszip.min.js"></script>  
  15.   <script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <div id="example">  
  18.               
  19.                         <input id="slider" class="temperature" />  
  20.                                     
  21.             </div>      
  22.     <script>  
  23.                 function sliderOnSlide(e) {  
  24.                     console.log("On Slide value:" + e.value);  
  25.                 }  
  26.   
  27.                 function sliderOnChange(e) {  
  28.                     console.log("On Change value:" + e.value);  
  29.                 }                      
  30.                 $(document).ready(function() {  
  31.                     $("#slider").kendoSlider({  
  32.                         change: sliderOnChange,  
  33.                         slide: sliderOnSlide,  
  34.                         min: 0,  
  35.                         max: 30,                           
  36.                         value: 18  
  37.                     });  
  38.   
  39.                    
  40.                 });  
  41.             </script>  
  42. </body>  
  43. </html>  
Kendo Slider Using jQuery
 
In the above code, you can see how Kendo slider control is initialized with some properties,
  1. min – defines the minimum value
  2. max – defines the maximum value
  3. value – default slider value
  4. change- the change event which will be captured when there is a change in the value
  5. slide – the slide event is used to capture the value when the user uses the slider.
Kendo Slider Using jQuery
 

Summary

 
We have seen how to implement the kendo slider control using jQuery, and work with a change and slide event in regards to the slider control.