A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.
<input id="demo1" type="text" value="55" name="demo1"> <script> $("input[name='demo1']").TouchSpin({ min: 0, max: 100, step: 0.1, decimals: 2, boostat: 5, maxboostedstep: 10, postfix: '%' }); </script>
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="demo2" class="col-md-4 control-label">Example:</label> <input id="demo2" type="text" value="0" name="demo2" class="col-md-8 form-control"> </div> </form> <script> $("input[name='demo2']").TouchSpin({ min: -1000000000, max: 1000000000, stepinterval: 50, maxboostedstep: 10000000, prefix: '$' }); </script>
<input id="demo_vertical" type="text" value="" name="demo_vertical"> <script> $("input[name='demo_vertical']").TouchSpin({ verticalbuttons: true }); </script>
<input id="demo_vertical2" type="text" value="" name="demo_vertical2"> <script> $("input[name='demo_vertical2']").TouchSpin({ verticalbuttons: true, verticalupclass: 'glyphicon glyphicon-plus', verticaldownclass: 'glyphicon glyphicon-minus' }); </script>
<input id="demo3" type="text" value="" name="demo3"> <script> $("input[name='demo3']").TouchSpin(); </script>
The initval
setting is only applied when no explicit value is set on the input with the value
attribute.
<input id="demo3_21" type="text" value="" name="demo3_21"> <script> $("input[name='demo3_21']").TouchSpin({ initval: 40 }); </script> <input id="demo3_22" type="text" value="33" name="demo3_22"> <script> $("input[name='demo3_22']").TouchSpin({ initval: 40 }); </script>
Size of the whole controller can be set with applying input-sm
or input-lg
class on the input, or by applying the plugin on an input inside an input-group
with the proper size class(input-group-sm
or input-group-lg
).
<input id="demo4" type="text" value="" name="demo4" class="input-sm"> <script> $("input[name='demo4']").TouchSpin({ postfix: "a button", postfix_extraclass: "btn btn-default" }); </script>
<div class="input-group input-group-lg"> <input id="demo4_2" type="text" value="" name="demo4_2" class="form-control input-lg"> </div> <script> $("input[name='demo4_2']").TouchSpin({ postfix: "a button", postfix_extraclass: "btn btn-default" }); </script>
<div class="input-group"> <input id="demo5" type="text" class="form-control" name="demo5" value="50"> <div class="input-group-btn"> <button type="button" class="btn btn-default">Action</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu pull-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <script> $("input[name='demo5']").TouchSpin({ prefix: "pre", postfix: "post" }); </script>
$("input[name='demo6']").TouchSpin({ buttondown_class: "btn btn-link", buttonup_class: "btn btn-link" });
Option | Default | Description |
---|---|---|
initval |
"" |
Applied when no explicit value is set on the input with the value attribute. Empty string means that the value remains empty on initialization. |
min |
0 |
Minimum value. |
max |
100 |
Maximum value. |
step |
1 |
Incremental/decremental step on up/down change. |
forcestepdivisibility |
'round' |
How to force the value to be divisible by step value: 'none' | 'round' | 'floor' | 'ceil' |
decimals |
0 |
Number of decimal points. |
stepinterval |
100 |
Refresh rate of the spinner in milliseconds. |
stepintervaldelay |
500 |
Time in milliseconds before the spinner starts to spin. |
verticalbuttons |
false |
Enables the traditional up/down buttons. |
verticalupclass |
'glyphicon glyphicon-chevron-up' |
Class of the up button with vertical buttons mode enabled. |
verticaldownclass |
'glyphicon glyphicon-chevron-down' |
Class of the down button with vertical buttons mode enabled. |
prefix |
"" |
Text before the input. |
postfix |
"" |
Text after the input. |
prefix_extraclass |
"" |
Extra class(es) for prefix. |
postfix_extraclass |
"" |
Extra class(es) for postfix. |
booster |
true |
If enabled, the the spinner is continually becoming faster as holding the button. |
boostat |
10 |
Boost at every nth step. |
maxboostedstep |
false |
Maximum step when boosted. |
mousewheel |
true |
Enables the mouse wheel to change the value of the input. |
buttondown_class |
'btn btn-default' |
Class(es) of down button. |
buttonup_class |
'btn btn-default' |
Class(es) of up button. |
The following events are triggered on the original input by the plugin and can be listened on.
Event | Description |
---|---|
change |
Triggered when the value is changed with one of the buttons (but not triggered when the spinner hits the limit set by settings.min or settings.max . |
touchspin.on.startspin |
Triggered when the spinner starts spinning upwards or downwards. |
touchspin.on.startupspin |
Triggered when the spinner starts spinning upwards. |
touchspin.on.startdownspin |
Triggered when the spinner starts spinning downwards. |
touchspin.on.stopspin |
Triggered when the spinner stops spinning. |
touchspin.on.stopupspin |
Triggered when the spinner stops upspinning. |
touchspin.on.stopdownspin |
Triggered when the spinner stops downspinning. |
touchspin.on.min |
Triggered when the spinner hits the limit set by settings.min . |
touchspin.on.max |
Triggered when the spinner hits the limit set by settings.max . |
The following events can be triggered on the original input.
Example usages:
$("input").trigger("touchspin.uponce");
$("input").trigger("touchspin.updatesettings", {max: 1000});
Event | Description |
---|---|
touchspin.updatesettings |
function(newoptions) : Update any setting of an already initialized TouchSpin instance. |
touchspin.uponce |
Increase the value by one step. |
touchspin.downonce |
Decrease the value by one step. |
touchspin.startupspin |
Starts the spinner upwards. |
touchspin.startdownspin |
Starts the spinner downwards. |
touchspin.stopspin |
Stops the spinner. |
Download from github. Please report issues and suggestions to github's issue tracker or contact me on g+ or twitter!
Follow us on LinkedIn to get notified about the upcoming tools, and feel free to share your thoughts with us! We welcome any jQuery/Bootstrap plugin suggestions which can help you and the others.
Like this plugin, have a question or just want to say hello? Feel free to leave a comment below.