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 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.
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
31/07/2012 @ 12:25 pm
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.
01/08/2012 @ 6:54 am
You can fix this by changing parseFloat to parseInt in the script.
04/07/2012 @ 2:45 pm
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.
04/07/2012 @ 3:20 pm
I got the equivalent of the change feature working my using the jQuery replaceWith method.
06/07/2012 @ 6:33 am
You could simply re-initialize the plugin with new max value, whenever you need to change the max value.
23/05/2012 @ 9:25 am
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
23/05/2012 @ 6:00 pm
Yes, its absolutely free you can use it in commercial application. You can also compress the script if you need.
Pingback: Smart Spin – jQuery Spin Button Plugin | codeManiac - Snippets, Templates, API and the best developer content
18/04/2012 @ 9:23 am
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);
});
19/04/2012 @ 10:40 am
setInterval is actually used to simulate the mousehold event. Its not possible with setTimeout, if setTimout is used you have to click up/down buttons to change the value.
12/02/2012 @ 12:10 am
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?
13/02/2012 @ 5:59 am
Can you show me how you are doing it, that would be easy for me to figure out the problem.
24/05/2012 @ 1:39 pm
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
31/01/2012 @ 5:05 pm
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 !
31/01/2012 @ 5:47 pm
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 !
Pingback: The best 120+ Jquery plugins from around the internet
Pingback: Basit Ama Kullanışlı 10 JQuery Eklentisi | webloti
Pingback: jquery by uprod - Pearltrees
Pingback: Website - Forms - Components - Controls by politicus - Pearltrees
04/01/2012 @ 12:28 pm
Hello! Can’t download or view demo… :’(
07/01/2012 @ 7:05 am
Check it now, I was updating the theme and moving to new host. Its working now.
Pingback: 10 Advanced but Simple jQuery Pugins | jQuery4u
Pingback: 32 Useful jQuery Plugins From 2011 | AcrisDesign
Pingback: E-sitesweb » 50 New And Crazy Cool jQuery Plugins From Year 2011
Pingback: 10 interesting jQuery plugins (august 2011) – Script Tutorials
27/08/2011 @ 10:31 am
Awasome resources. Good works
Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Drawlines
Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011
Pingback: 50 new and crazy cool jQuery plugins from year 2011 - WordPress Vampire
Pingback: 50 个新酷的 jQuery 插件
Pingback: 50个2011年最新最酷的jQuery插件
Pingback: 50 new cool and crazy jQuery plugins
Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Cairns Web Design
17/06/2011 @ 5:01 pm
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
31/05/2011 @ 12:21 am
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.
31/05/2011 @ 12:13 am
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. ???
Pingback: jQuery Weekly Plugins #1: 4/11/11 - webdesigncrowd.com
Pingback: 10 jQuery Integration Plugins | jQuery4u
22/04/2011 @ 4:55 am
Quite! This was a really fantastic post. Thank you for ones furnished details.
21/04/2011 @ 5:47 pm
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.
Pingback: スピンボタンが作れるjQueryプラグイン「Smart Spin」 | Web活メモ帳
Pingback: jQuery Spin Button Plugin: Smart Spin | Greepit
14/03/2011 @ 9:42 am
Awesome! Subscribed and looking forward for more innovative resources! thumbs up!
Sarfraz
10/03/2011 @ 10:30 am
Great….
Thanks Shahbaz for ur quick reply…
10/03/2011 @ 6:04 am
Good work…
Does it allow entering values in the spinners?
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