JQuery UI Spinner

In the last tutorial we saw how we can get numeric values within a specific range using JQuery UI slider control. There are other JQuery UI widgets which allow user to insert numeric values within a specific range. One such control is the JQuery UI Spinner widget. This widget allow users to increment numeric values within a control using up and down keys on keyboard or using mouse scroll. Clicking up and down arrows can also increment and decrement values. Also, user can insert numeric value directly in the control. Values in the control can be skipped using step feature. To create a spinner, simply call spinner() function with or without optional parameters on any element which you want to convert to spinner. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Spinner</title>
       <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/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() {
            $( "#spinner" ).spinner();
         });
      </script>
       
   </head>
   <body>
      <!-- HTML --> 
      <div id="spin-div">
         <input type="text" id="spinner" value="0" />
      </div>
   </body>
</html>

Download Code Run Code

The above code contains a div inside which there is an input element with id “spinner”. JQuery factory function selects this element and calls the spinner() function on it. If you load the above page in browser, you should see a spinner with default value of 0. You can change the value of the spinner by pressing up and down keys, by scrolling your mouse or by clicking up and down arrows with mouse.

JQuery UI Spinner with Optional Parameters

You can also pass additional optional parameters to the spinner() function to change the behavior of the spinner. The parameters are passed inside the curly brackets with each parameter separated by a comma. The following example uses, max, min and step optional parameters. Max specifies the maximum value of the spinner, min specifies the minimum while step specifies the number of values to skip. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Spinner</title>
       <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/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() {
            $( "#spinner" ).spinner({
                max:20,
                min:-20,
                step:2
            });
         });
      </script>
       
   </head>
   <body>
      <!-- HTML --> 
      <div id="spin-div">
         <input type="text" id="spinner" value="0" />
      </div>
   </body>
</html>

Download Code Run Code

In the above webpage spinner has a maximum and minimum values of 20 and -20 respectively . Also, when you increment or decrement the counter, it increases or decreases by 2.

<<< JQuery UI SliderJQuery UI Tabs >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .