jQuery Bootstrap TouchSpin Plugin Examples

Examples

<script>
    $("input[name='demo1']").TouchSpin({
        min: 0,
        max: 100,
        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>









Settings

Option Default Description
min 0 Minimum value.
max 100 Maximum value.
step 1 Incremental/decremental step on up/down change.
stepinterval 100 Refresh rate of the spinner in milliseconds.
stepintervaldelay 500 Time in milliseconds before the spinner starts to spin.
prefix "" Text before the input.
postfix "" Text after the input.
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.

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.min Triggered when the spinner hits the limit set by settings.min.
touchspin.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 usage: $("input").trigger("touchspin.uponce"));

Event Description
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!