Bootstrap TouchSpin

Github project page Download

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.

Examples

<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>

    

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.
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.

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 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.

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!