A mobile and touch friendly input spinner component for Bootstrap 3 & 4.
It supports the mousewheel and the up/down keys.
CSS file is necessary only if you are using vertical buttons functionality. In other cases plugin is using boostrap input-group component.
<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-secondary"
data-bts-button-up-class="btn btn-secondary"
/>
<script>
$("input[name='demo0']").TouchSpin();
</script>
<input id="demo_callback" type="text"
value="10000.00"
name="demo_callback"
data-bts-min="-1000000"
data-bts-max="1000000"
data-bts-step=".01"
data-bts-decimals="2"
/>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script>
$("input[name='demo_callback']").TouchSpin({
callback_before_calculation: function(v){
return numeral(v).value();
},
callback_after_calculation: function(v){
return numeral(v).format("$0,0.00");
}
});
</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,
verticalup: '<i class="fas fa-caret-up"></i>',
verticaldown: '<i class="fas fa-caret-down"></i>'
});
</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" class="input-lg" value="" name="demo3_21">
<script>
$("input[name='demo3_21']").TouchSpin({
initval: 40
});
</script>
<input id="demo3_22" type="text" class="input-sm" 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-primary"
});
</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-primary"
});
</script>
<div class="input-group">
<input id="demo5" type="text" class="form-control" name="demo5" value="50">
<div class="input-group-append">
<button type="button" class="btn btn-success">Action</button>
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</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
});
By setting the min or max option to NULL no limit is enfored to the particular boundary.
<input id="demo8-1" type="text" value="1234567890" name="demo8-1">
<script>
$("input[name='demo8-1']").TouchSpin({
min: null,
max: null
});
</script>
| 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. Can be null, when there is no boundary check. |
max |
100 |
Maximum value. Can be null, when there is no boundary check. |
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. |
verticalup |
+ |
Content of the up button with vertical buttons mode enabled. |
verticaldown |
- |
Content of the down button with vertical buttons mode enabled. |
verticalupclass |
"" |
Class of the up button with vertical buttons mode enabled. |
verticaldownclass |
"" |
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-primary' |
Class(es) of down button. |
buttonup_class |
'btn btn-primary' |
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!