Skip to content
Related Articles

Related Articles

Improve Article

jQuery UI | Spinner to select numeric data

  • Last Updated : 11 Oct, 2019

Spinner in jQuery UI is used to increase or decrease the value by using arrow keys or by using up/down buttons. This spinner is used for numeric inputs.
We will use the CDN link in code to add different libraries and styles. To display this Calendar like any other jQuery UI widget, we have to link to jQuery and jQuery UI. Here is a simple code with all HTML tags to display a spinner. You can just copy this code to display the spinner.

Example 1:




<!DOCTYPE html>
<html>
      
<head>
    <title>
        jQuery UI | Spinner to select numeric data
    </title>
      
    <link href=
themes/ui-lightness/jquery-ui.css'
        rel='stylesheet'>
          
    <script src=
    </script>
      
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3>
        jQuery UI | Spinner to
        select numeric data
    </h3>
    <input id="spinner" size=3 value=17>
          
    <script>
    $(document).ready(function() {
        $( "#spinner" ).spinner();
    });
    </script>
</body>
  
</html>

Output:

Default value: It is used to set the default value to the input box.

Example 2:






<!DOCTYPE html>
<html>
      
<head>
    <title>
        jQuery UI | Spinner to select numeric data
    </title>
      
    <link href=
themes/ui-lightness/jquery-ui.css'
        rel='stylesheet'>
          
    <script src=
    </script>
      
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3>
        jQuery UI | Spinner to
        select numeric data
    </h3>
    <input id="spinner" size=3>
          
    <script>
    $(document).ready(function() {
        $( "#spinner" ).spinner();
        $( "#spinner" ).val(500)
    });
    </script>
</body>
  
</html>

Output:

Maximum and Minimum value: It can be set the Upper and Lower limits for the spinner.




<script>
$(document).ready(function() {
    $( "#spinner" ).spinner({
        max: 20,
        min: -10
    });
});
</script>

Page value: We can set the value of Page up or Page down key button value by using page value.




<script>
$(document).ready(function() {
    $( "#spinner" ).spinner({
        page:50
    });
});
</script>

Step Value: We can set the value of up arrow or down arrow key button value by using step.




<script>
$(document).ready(function() {
    $( "#spinner" ).spinner({
        step:10
    });
});
</script>

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :