Bootstrap TouchSpin

Github project page Download

A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.

Examples

        <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-4 control-label">Example:</label> <input id="demo2" type="text" value="0" name="demo2" class="col-md-8 form-control">
            </div>
        </form>

        <script>
            $("input[name='demo2']").TouchSpin({
                min: -1000000000,
                max: 1000000000,
                stepinterval: 50,
                maxboostedstep: 10000000,
                prefix: '$'
            });
        </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="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"
        });
              

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

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!

Follow us to get notified about the upcoming tools!

Follow us on LinkedIn to get notified about the upcoming tools, and feel free to share your thoughts with us! We welcome any jQuery/Bootstrap plugin suggestions which can help you and the others.

Comments

Like this plugin, have a question or just want to say hello? Feel free to leave a comment below.