Bootstrap TouchSpin

Bootstrap 3.4.1 Demo

Demonstrating TouchSpin compatibility with Bootstrap 3

← Back to Main Demo Bootstrap 4 Demo →

Bootstrap 3 Features

This demo showcases Bootstrap TouchSpin working with Bootstrap 3.4.1, featuring:

input-group-btn and input-group-addon classes
Bootstrap 3 button styles and sizing classes
Classic Bootstrap 3 form controls and layouts
Automatic Bootstrap version detection

Basic Examples

Simple TouchSpin:

Code:

$("input[name='demo1']").TouchSpin();

With Prefix & Postfix:

Code:

$("input[name='demo2']").TouchSpin({
  prefix: '$',
  postfix: '.00',
  min: 0,
  max: 1000
});

Decimal Values:

Code:

$("input[name='demo3']").TouchSpin({
  min: 0,
  max: 10,
  step: 0.01,
  decimals: 2
});

Sizing Examples

Small Size:

Code:

<input class="form-control input-sm" ...>
$("input[name='demo4']").TouchSpin();

Large Size:

Code:

<input class="form-control input-lg" ...>
$("input[name='demo5']").TouchSpin();

Vertical Buttons

Vertical Layout:

Code:

$("input[name='demo6']").TouchSpin({
  verticalbuttons: true,
  verticalup: '<i class="fa fa-plus"></i>',
  verticaldown: '<i class="fa fa-minus"></i>'
});

Bootstrap 3 Input Groups

Advanced Input Group:

Code:

<div class="input-group">
  <span class="input-group-addon">
    <i class="fa fa-calculator"></i>
  </span>
  <input ... class="form-control">
  <div class="input-group-btn">
    <button class="btn btn-success">Apply</button>
    ...
  </div>
</div>

Custom Styling

Custom Button Classes:

Code:

$("input[name='demo8']").TouchSpin({
  buttondown_class: "btn btn-danger",
  buttonup_class: "btn btn-success",
  buttondown_txt: '<i class="fa fa-minus"></i>',
  buttonup_txt: '<i class="fa fa-plus"></i>'
});

Advanced Features

With Booster & Limits:

Code:

$("input[name='demo9']").TouchSpin({
  min: 0,
  max: 1000,
  step: 5,
  booster: true,
  boostat: 5,
  maxboostedstep: 100,
  postfix: " items"
});

Force Step Divisibility:

Code:

$("input[name='demo10']").TouchSpin({
  min: 0,
  max: 100,
  step: 5,
  forcestepdivisibility: 'round'
});

Bootstrap 3 Specific Build

Version-Specific Build: This demo uses the Bootstrap 3 specific build (jquery.bootstrap-touchspin-bs3.js) for optimal performance and compatibility.