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"
});
| 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!