Fork me on GitHub
Post Format

jQuery Spin Button Plugin: Smart Spin

Smart spin is a jQuery spin button plugin that mimics the very common windows spin button control. Smart spin allows you to select a value between minimum and maximum values using either mouse or keyboard. You can also enter a value via keyboard.

Smart spin contains a text box and “up” “down” buttons, it also supports “masking”(text that appears when the control looses focus). Clicking the “up” button causes the value to increment by step value (step value is configurable, default is 1), while clicking the “down” button causes the value to decrement by step value. Clicking up/down buttons and holding the left mouse button causes the values to change more rapidly. Smart Spin now supports mouse wheel button, you can change value using mouse wheel as well.

smart spinner screen shot

Smart spin Configuration Parameters
  • min: minimum value of spin button control
  • max: maximum value of spin button control
  • stepInc: small increment value
  • pageInc: large increment value (on page up and page down)
  • mask: optional text that appears when the control looses focus
  • initValue: value to be displayed when the control in initialized/reset
  • width: width of spin button control
  • height: height of spin button control
  • btnWidth: spin buttons width, requires for custom image
  • callback: callback function to be called on each value change
Methods

Smart Spin plugin has a “reset” method that can be invoked over the plugin, “reset” method takes one parameter, the plugin value will be updated by this parameter value.

Using Smart Spin

In your HTML file add the following in the head section.

  • Add a reference to latest jQuery script
  • Add a reference to smartspinner.js file
  • Add a reference to smartspinner.css

Create a text box (input type=”text”) within the body of your HTML file as shown below.


<input type="text" id="spn" class="smartspinner"/>

Also add the following code to your HTML file’s head section.

   <script type="text/javascript">
        $(document).ready(function() {
            $('#spn').spinit({min:2,max:200,stepInc:2,pageInc:pageInc, height: 22 });
        });
    </script>

Here is the complete code for the example above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Spinner Control</title>

    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="smartspinner.js" type="text/javascript"></script>
    <link href="smartspinner.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript">

        $(document).ready(function() {
            $('#spn').spinit({min:2,max:200,stepInc:2,pageInc:20, height: 22 });

        });
    </script>

</head>
<body>
    <input type="text" id="spn" class="smartspinner" />  
    
</body>
</html>
Update History
  • March 8, 2011 Smart Spin released.
  • April 19, 2011 Mouse Wheel support added.

No related posts.

47 comments

  1. Nelson Matias

    17/09/2012 @ 2:09 pm

    Hi, before all, you have developed a great plugin. I’ have a question. How can i reset the spins confs? Example: i want change the spin1 max value automatically to the actual spin2 value when i change the spin2 value. Do you understand?
    Thanks

    Reply
  2. hi i have using smart spinner for incremental value in decimal points. while incrementing it shows like 1.2000000. can any one help me. how to resolve this issue.

    Reply
  3. Does this spinner plugIn have a change method? For an already defined spinner, I would like to dynamically change the max property, and maybe other properties in the future. I believe jQuery has a change method, but I would prefer to use this plugIn instead because of it’s mask feature and it is more lightweight. The only think holding me back is I need to dynamically change the max.

    Reply
  4. Good work and must say a great plugin…

    But I have certain questions regarding the plugin:

    1. Under what type of license is this plugin offered? The reason I ask this is that I wish to use your plugin for on a tool which is commercial in nature… I am developing a web tool and wish to use this plugin there…

    2. I guess from the git repo I did not see any minimized version of this javascript. Do you not offer a minimized version of the jquery script. If not are we allowed to minimize your script so that we can easily bundle it with our tool?

    thanks,
    dhiraj

    Reply
  5. Pingback: Smart Spin – jQuery Spin Button Plugin | codeManiac - Snippets, Templates, API and the best developer content

  6. Wonderful work!

    As per Andy Kim’s statement, I had trouble with the spinner rolling to far, particularly in recent versions of Chrome / Chromium. The fix is to use setTimeout instead of set Interval, with a quarter-second period;

    el.mousedown(function(e) {
    isPgeInc = false;
    clearInterval(interval);
    interval = setTimeout(onValueChange, 250);
    });

    Reply
  7. I am using 8 smartspinners on a page. I want to initialize each of those to a different value from Javascript. When I do that using either .val(n) or .reset(n) I get strange results. As soon as I mouseover one of the spinners, the value gets changed to the initValue. If I use .reset() then all spinners except the last one get changed to the initValue, and the last one gets set to the value I used in the reset(). What am I doing wrong?

    Reply
      • Hi Shahbaz,

        I am facing the same issue. I guess the problem is the variable value and all other defined variable defined are being shared among all the created spin controls, so even if you set value using reset function or using some other way, the last set value get shared by all the created spin control.

        If you debug the script using chrome you will see that value variable is set as a Closure that is shared by all the spin controls…

        Thanks,
        Dhiraj

        Reply
  8. Nice work …….2 questions :
    How can i dynamically disabled it via jquery ….?
    I have 1 field ….and after an triggered event i am make it read-only with Jquery …..but the mouse-well continue to work even on a read-only field …… that is not ok from my point of view .

    Cheers !

    Reply
    • i altered an function in the end …something like
      function setValue(a, b) {

      if(el.attr(‘readonly’)){return;}

      if (a >= settings.min && a <= settings.max ) {
      value = b;
      } el.val(value);
      }
      So at least now is not modifying the values if the field is read-only !

      Cheers !

      Reply
  9. Pingback: The best 120+ Jquery plugins from around the internet

  10. Pingback: Basit Ama Kullanışlı 10 JQuery Eklentisi | webloti

  11. Pingback: jquery by uprod - Pearltrees

  12. Pingback: Website - Forms - Components - Controls by politicus - Pearltrees

  13. Pingback: 10 Advanced but Simple jQuery Pugins | jQuery4u

  14. Pingback: 32 Useful jQuery Plugins From 2011 | AcrisDesign

  15. Pingback: E-sitesweb » 50 New And Crazy Cool jQuery Plugins From Year 2011

  16. Pingback: 10 interesting jQuery plugins (august 2011) – Script Tutorials

  17. Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Drawlines

  18. Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011

  19. Pingback: 50 new and crazy cool jQuery plugins from year 2011 - WordPress Vampire

  20. Pingback: 50 个新酷的 jQuery 插件

  21. Pingback: 50个2011年最新最酷的jQuery插件

  22. Pingback: 50 new cool and crazy jQuery plugins

  23. Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Cairns Web Design

  24. This is very nice. The attention to detail is amazing.

    I found a small bug, though. When you don’t set the mask, deleting everything using the backspace key and then re-entering a number brings back the deleted number. Steps to reproduce:

    1) Download the demo code.
    2) Modify the spinner.htm file and take out the mask parameter from line 14.
    3) Open spinner.htm in a browser and put the text cursor at the end of the red number.
    4) Press the backspace key twice to delete the “40”
    5) Type in any number, such as 1

    Result: You get the 40 back

    Expected result: 1

    Environment: Mac OS X 10.6.7, Safari 5.0.5

    Work around:

    Commenting out line 113 of smartspinner.js fixes the problem, but it will introduce another problem if you do need to use masks.

    Other things I noticed:

    1) The default repeat delay is too small. I find that it often increments twice when I click the increment button. I had to change the wait interval to 250 ms from 100 ms to make it work for me.

    2) The value increases when I scroll down and decreases when I scroll up. Other spinner controls that do implement mousewheel support do it the opposite way but I’m not sure if this is a bug or by design.

    In any case, don’t let my bug report get you down. You’ve written something amazing and shared it with the world. High five :)

    Reply
  25. Everything looks ok, however when mousing over either the top or bottom arrow (graphic), the mouse pointer is a cursor. I can’t adjust the value at all using the mouse as intended. “Mask” also doesn’t seem to work. I can’t for the life of me figure out what’s wrong. Everything is in it’s place.

    Reply
  26. Everything seems to “look” ok, however mask isn’t working and the arrows don’t do anything. Pointer remains a “pointer” and I can not increase the numeric value using the arrows. ???

    Reply
  27. Pingback: jQuery Weekly Plugins #1: 4/11/11 - webdesigncrowd.com

  28. Pingback: 10 jQuery Integration Plugins | jQuery4u

  29. Superb published report. It’ll be useful to anybody who usess it, including yours genuinely :) . Keep up the good perform – for confident i’ll check out a lot more posts.

    Reply
  30. Pingback: スピンボタンが作れるjQueryプラグイン「Smart Spin」 | Web活メモ帳

  31. Pingback: jQuery Spin Button Plugin: Smart Spin | Greepit

    • Muhammad Shahbaz Saleem

      10/03/2011 @ 6:27 am

      Yes, it does. The reason why you are not able to enter value with the keyboard is, the length of mask text is greater than the allowed no of digits for the controls in the demo. try deleting the mask text before entering values via keyboard :)

      Reply

Leave a Reply

Required fields are marked *.


3 + = eight