jQuery Bootstrap TouchSpin Plugin Examples

Download This Plugin Back To jQueryScript

A jQuery plugin for Bootstrap that transforms number inputs into numeric spinners with min/max validation, decimal precision, and accelerated input.

Example using data attributes:

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

Callback example to format the number with numeraljs (anything else can be used):

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

Vertical button alignment (large):

<input id="demo_vertical" type="text" value="" name="demo_vertical">
<script>
    $("input[name='demo_vertical']").TouchSpin({
      verticalbuttons: true
    });
</script>

Vertical buttons with custom icons (small):

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

Example with postfix:

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

Init with empty value:

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

Value attribute is not set (Big) (applying settings.initval) : Value is set explicitly to 33 (Small) (skipping settings.initval) :

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

Button postfix (small):

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

Button postfix (large):

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

Button group:

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

Change button class:

$("input[name='demo6']").TouchSpin({
    buttondown_class: "btn btn-link",
    buttonup_class: "btn btn-link"
});

Blank/Non-Number replaced:

$("input[name='demo7']").TouchSpin({
    replacementval: 10
});

By setting the min or max option to NULL no limit is enfored to the particular boundary.

Disabling boundaries:

<input id="demo8-1" type="text" value="1234567890" name="demo8-1">
<script>
    $("input[name='demo8-1']").TouchSpin({
        min: null,
        max: null
    });
</script>

Event demo: