+ A mobile and touch friendly input spinner component for Bootstrap 3.
+ It supports the mousewheel and the up/down keys.
+
+<input id="demo0"
+ type="text"
+ value="55"
+ name="demo0"
+ data-bts-min="0"
+ data-bts-max="100"
+ data-bts-init-val=""
+ data-bts-step="1"
+ data-bts-decimal="0"
+ data-bts-step-interval="100"
+ data-bts-force-step-divisibility="round"
+ data-bts-step-interval-delay="500"
+ data-bts-prefix=""
+ data-bts-postfix=""
+ data-bts-prefix-extra-class=""
+ data-bts-postfix-extra-class=""
+ data-bts-booster="true"
+ data-bts-boostat="10"
+ data-bts-max-boosted-step="false"
+ data-bts-mousewheel="true"
+ data-bts-button-down-class="btn btn-default"
+ data-bts-button-up-class="btn btn-default"
+ />
+<script>
+ $("input[name='demo0']").TouchSpin({
+ });
+</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="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-5 control-label">Example:</label> <input id="demo2" type="text" value="0" name="demo2" class="col-md-7 form-control">
+ </div>
+</form>
+
+<script>
+ $("input[name='demo2']").TouchSpin({
+ min: -1000000000,
+ max: 1000000000,
+ stepinterval: 50,
+ maxboostedstep: 10000000,
+ prefix: '$'
+ });
+</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"
+});
+
+
+
+
+
+$("input[name='demo7']").TouchSpin({
+ replacementval: 10
+});
+
+
+
+
+ | 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.
+ |
+
replacementval |
+ "" |
+ Applied when user leaves the field empty/blank or enters non-number. Empty string means that the value will not be replaced. + | +
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. | +
buttondown_txt |
+ '-' |
+ Content inside the down button. | +
buttonup_txt |
+ '+' |
+ Content inside the 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!
+ +