# 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

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>

With prefix

    <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: little different for bootstrap v4

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

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:

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