Bootstrap TouchSpin- A mobile and touch friendly input spinner component that supports mouse wheel and UP/DOWN keys
Settings
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. |
Events
Triggered events
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 bysettings.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 . |
Callable events
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
Download from github. Please report issues and suggestions to github’s issue tracker or contact me on g+ or twitter!
Website: http://www.virtuosoft.eu/code/bootstrap-touchspin/
Thanks for reading,
Nabeel Shahid.
Recent Comments