JQuery UI Slider

There are several ways to take numeric input from users. You can use normal text boxes or drop down lists etc. However there are chances that user can enter invalid values in the text boxes. For instance you might want to take value within the range of 1-100. It is not conveninent of allowing user to enter value in the text and then implementing validations. There is a better way to do this JQuery UI Slider widget. The slider widget allows visitor to select a numeric value within a specific range by sliding a small button horizontally. To create a slider, simply call slider() function with or without optional parameters on any element which you want to convert to slider. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Progressbar</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
       <script>
         $(function() {
            $( ".slider" ).slider();
         });
      </script>
       
       <style>
           .slider{
               
               width: 500px;
               margin: 0 auto;
           }
       
       </style>
   </head>
    
   <body>
   
      <div class="slider"></div>
   </body>
</html>

Download Code Run Code

The above page contains a div with class slider. JQuery factory method selects this div and calls slider() function on this div. When you run the above page in browser you should see a 500 pixels wide slider in the middle of your page. You can drag the slider with he help a small button located on it.

Slider with Optional Parameters

You can also pass additional optional parameters to the slider() function to change the behavior of the slider. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example optional parameters value and orientation are is passed to menu function. The value specifies default selected value for the slider and orientation specifies vertical or horizontal orientation of the slider. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Slider with Optional Parameters</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
       <script>
         $(function() {
            $( ".slider" ).slider({
                
               value: 50,
               orientation: "vertical"
            });
             
         });
      </script>
       
    
   </head>
    
   <body>
   
      <div class="slider"></div>
   </body>
</html>

Download Code Run Code

In the above webpage, the default value for slider is set to 50 which sets the slider button at the middle of the slider when the page loads. Similarly, the orientation of the slider is set to vertical using orientation parameter

<<< JQuery UI ProgressbarJQuery UI Spinner >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .