Bootstrap TouchSpin- A mobile and touch friendly input spinner component that supports mouse wheel and UP/DOWN keys

 

Settings

OPTIONDEFAULTDESCRIPTION
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.
min0Minimum value.
max100Maximum value.
step1Incremental/decremental step on up/down change.
forcestepdivisibility'round'How to force the value to be divisible by step value: 'none' | 'round' | 'floor' |'ceil'
decimals0Number of decimal points.
stepinterval100Refresh rate of the spinner in milliseconds.
stepintervaldelay500Time in milliseconds before the spinner starts to spin.
verticalbuttonsfalseEnables 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.
boostertrueIf enabled, the the spinner is continually becoming faster as holding the button.
boostat10Boost at every nth step.
maxboostedstepfalseMaximum step when boosted.
mousewheeltrueEnables 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.

EVENTDESCRIPTION
changeTriggered 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.startspinTriggered when the spinner starts spinning upwards or downwards.
touchspin.on.startupspinTriggered when the spinner starts spinning upwards.
touchspin.on.startdownspinTriggered when the spinner starts spinning downwards.
touchspin.on.stopspinTriggered when the spinner stops spinning.
touchspin.on.stopupspinTriggered when the spinner stops upspinning.
touchspin.on.stopdownspinTriggered when the spinner stops downspinning.
touchspin.on.minTriggered when the spinner hits the limit set by settings.min.
touchspin.on.maxTriggered 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});

EVENTDESCRIPTION
touchspin.updatesettingsfunction(newoptions): Update any setting of an already initialized TouchSpin instance.
touchspin.uponceIncrease the value by one step.
touchspin.downonceDecrease the value by one step.
touchspin.startupspinStarts the spinner upwards.
touchspin.startdownspinStarts the spinner downwards.
touchspin.stopspinStops 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.