jQuery UI | Spinner to select numeric data

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



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

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.