Sample here

JQuery Spin Button
Plugin: Smart Spin

The JQuery spin button plugin, which imitates the very common spin button

Introduction

 

The JQuery spin button plugin, which imitates the very common spin button controls of windows, is commonly known as the Smart Spin in the circles of developers. The beauty of the smart spin actually lies in the fact that it allows you to choose a value that exists between maximum and minimum values, utilizing either Keyboard or mouse.

The Mechanism

 

The Smart Spin is home to a Text box. The tool is also equipped with both the “up” and “down” buttons. The tool also supports masking. Clicking of the “up” button means that value will increment by one step. Similarly clicking of the “down” button means that the value will decrement by one step. The values can be changed. If you click the down or up buttons and at the same time you hold the left button of the mouse, then this action will make the values change quickly. Nowadays the Smart Spin also supports the wheel button of the mouse, which means that values can be changed through the Mouse wheel too.

<!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] --> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- [et_pb_line_break_holder] --> <title>jQuery UI Spinner - Default functionality</title><!-- [et_pb_line_break_holder] --> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><!-- [et_pb_line_break_holder] --> <link rel="stylesheet" href="/resources/demos/style.css"><!-- [et_pb_line_break_holder] --> <script src="https://code.jquery.com/jquery-1.12.4.js"></script><!-- [et_pb_line_break_holder] --> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><!-- [et_pb_line_break_holder] --> <script src="/resources/demos/external/jquery-mousewheel/jquery.mousewheel.js"></script><!-- [et_pb_line_break_holder] --> <script><!-- [et_pb_line_break_holder] --> $( function() {<!-- [et_pb_line_break_holder] --> var spinner = $( "#spinner" ).spinner();<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $( "#disable" ).on( "click", function() {<!-- [et_pb_line_break_holder] --> if ( spinner.spinner( "option", "disabled" ) ) {<!-- [et_pb_line_break_holder] --> spinner.spinner( "enable" );<!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> spinner.spinner( "disable" );<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> $( "#destroy" ).on( "click", function() {<!-- [et_pb_line_break_holder] --> if ( spinner.spinner( "instance" ) ) {<!-- [et_pb_line_break_holder] --> spinner.spinner( "destroy" );<!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> spinner.spinner();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> $( "#getvalue" ).on( "click", function() {<!-- [et_pb_line_break_holder] --> alert( spinner.spinner( "value" ) );<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> $( "#setvalue" ).on( "click", function() {<!-- [et_pb_line_break_holder] --> spinner.spinner( "value", 5 );<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> $( "button" ).button();<!-- [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] --> <!-- [et_pb_line_break_holder] --><p><!-- [et_pb_line_break_holder] --> <label for="spinner">Select a value:</label><!-- [et_pb_line_break_holder] --> <input id="spinner" name="value"><!-- [et_pb_line_break_holder] --></p><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --><p><!-- [et_pb_line_break_holder] --> <button id="disable">Toggle disable/enable</button><!-- [et_pb_line_break_holder] --> <button id="destroy">Toggle widget</button><!-- [et_pb_line_break_holder] --></p><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --><p><!-- [et_pb_line_break_holder] --> <button id="getvalue">Get value</button><!-- [et_pb_line_break_holder] --> <button id="setvalue">Set value to 5</button><!-- [et_pb_line_break_holder] --></p><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --></body><!-- [et_pb_line_break_holder] --></html>

The Parameters (Configuration)

\

Min: depicts the minimum value

\

Max: depicts the maximum value

\

Call-back: The button needs to be pressed with each change of value

\

BtnWidth: used for the width of spin buttons

\

PageInc: It is the large increment value

\

StepInc: It is the smallest increment value

\

Height: it is the Spin Button control’s height

\

Mask: It is the optional text which becomes apparent when the control loses the focus

\

Width: It is the Spin Button Control’s width

Conclusion

 

You can purchase Smart Spin with ease as it has become a popular tool today. Through this article we have tried to educate you regarding the basics of this plugin. There are several well-known websites and tutorials that can be searched by you if you want to know about the technical dynamics of this entity.