Open In App

jQuery UI | Spinner to select numeric data

Improve
Improve
Like Article
Like
Save
Share
Report

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>




Last Updated : 11 Oct, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads