Sample here

JQuery Spinner -
A Number Stepper Widget

The spinner is also sometimes referred to as number stepper widget.

INTRODUCTION

 

The advantages of JQuery are many, and that is why it is considered as the best option by many websites in the world today. In connection with JQuery, another popular terminology which you may have often heard of is that of jQuery UI. The jQuery UI is basically a collection of GUI Widgets. Without going into any details we would just like to tell you here that JQuery spinner is one of the widgets of jQuery UI.

THE JQUERY SPINNER

 

The spinner is also sometimes referred to as number stepper widget. The spinner is considered as the best tool when it comes to the handling of different kinds of numeric inputs. As a user it allows you to type a particular value directly. It also does not causes any hindrance as far as modification of an existing value through spinning goes. The spinning can be through a scroll wheel, keyboard or even a mouse. Combining the spinner with Globalize provides you the opportunity to even spin the modern-day currencies.

<!doctype html> <!-- [et_pb_line_break_holder] --><html lang="en"> <!-- [et_pb_line_break_holder] --> <head> <!-- [et_pb_line_break_holder] --> <meta charset="utf-8"> <!-- [et_pb_line_break_holder] --> <title>jQuery UI Spinner functionality</title> <!-- [et_pb_line_break_holder] --> <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <!-- [et_pb_line_break_holder] --> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <!-- [et_pb_line_break_holder] --> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- [et_pb_line_break_holder] --> <!-- CSS --> <!-- [et_pb_line_break_holder] --> <style type="text/css"> <!-- [et_pb_line_break_holder] --> #spinner-6 input {width: 100px} <!-- [et_pb_line_break_holder] --> </style> <!-- [et_pb_line_break_holder] --> <!-- Javascript --> <!-- [et_pb_line_break_holder] --> <script> <!-- [et_pb_line_break_holder] --> $(function() { <!-- [et_pb_line_break_holder] --> $("#spinner-6").spinner(); <!-- [et_pb_line_break_holder] --> $('button').button(); <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $('#stepUp-2').click(function () { <!-- [et_pb_line_break_holder] --> $("#spinner-6").spinner("stepUp"); <!-- [et_pb_line_break_holder] --> }); <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $('#stepDown-2').click(function () { <!-- [et_pb_line_break_holder] --> $("#spinner-6").spinner("stepDown"); <!-- [et_pb_line_break_holder] --> }); <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $('#pageUp-2').click(function () { <!-- [et_pb_line_break_holder] --> $("#spinner-6").spinner("pageUp"); <!-- [et_pb_line_break_holder] --> }); <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $('#pageDown-2').click(function () { <!-- [et_pb_line_break_holder] --> $("#spinner-6").spinner("pageDown"); <!-- [et_pb_line_break_holder] --> }); <!-- [et_pb_line_break_holder] --> }); <!-- [et_pb_line_break_holder] --> </script> <!-- [et_pb_line_break_holder] --> </head> <!-- [et_pb_line_break_holder] --> <body style="text-align: center;"> <!-- [et_pb_line_break_holder] --> <!-- HTML --> <!-- [et_pb_line_break_holder] --> <input id="spinner-6" /> <!-- [et_pb_line_break_holder] --> <br/> <br/><!-- [et_pb_line_break_holder] --> <button id="stepUp-2">Increment</button> <!-- [et_pb_line_break_holder] --> <button id="stepDown-2">Decrement</button> <!-- [et_pb_line_break_holder] --> <button id="pageUp-2">Increment Page</button> <!-- [et_pb_line_break_holder] --> <button id="pageDown-2">Decrement Page</button> <!-- [et_pb_line_break_holder] --> </body> <!-- [et_pb_line_break_holder] --></html> <!-- [et_pb_line_break_holder] -->

Interaction (Keyboard):

 

The text input is wrapped by the spinner by two different buttons. The buttons are used to either decrement or increment a current value.  In the case of Keyboard, Key events are integrated for the decrementing and incrementing of the value.

 

\

The page down button decrements the value by one page

\

The page up button increments the value by one page

\

The down button decrements the vale by one step

\

The up button increments the value by one step

Conclusion

 

JQuery spinner is one handy widget that can be utilized by you. Here the plan was to give you a basic idea of this concept. To know more you can search out the internet as there are many tutorials related to the topic available.