Bootstrap TouchSpin

Bootstrap 5.3.0 Demo

Demonstrating TouchSpin compatibility with Bootstrap 5

← Back to Main Demo Bootstrap 3 Demo Bootstrap 4 Demo

Bootstrap 5 Features

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

Simplified input group structure (no prepend/append wrapper divs)
Direct input-group-text elements
Bootstrap 5's CSS custom properties (CSS variables)
Enhanced color system and utilities
Modern spacing and typography
Bootstrap Icons integration

Basic Examples

Simple TouchSpin:

Code:

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

With Prefix & Postfix:

Code:

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

Currency (callbacks):

Try typing: $1,234abc or 1000.5 then press Enter / blur / use arrows. Value will normalize and format to $1,234.50.

Code (callbacks):

const before = (raw) => (raw ?? '').replace(/[^\d\.\-]/g, '');
const after  = (numStr) => {
  const n = parseFloat(numStr);
  if (!isFinite(n)) return '';
  return new Intl.NumberFormat('en-US', {
    style: 'currency', currency: 'USD',
    minimumFractionDigits: 2, maximumFractionDigits: 2
  }).format(n);
};

$("input[name='demo2cb']").TouchSpin({
  min: 0, max: 100000, step: 0.5, decimals: 2,
  callback_before_calculation: before,
  callback_after_calculation:  after
});

High Precision Decimals:

Code:

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

Bootstrap 5 Sizing

Small Size:

Code:

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

Large Size:

Code:

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

Vertical Buttons

Vertical with Bootstrap Icons:

Code:

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

Bootstrap 5 Input Groups

Modern Input Group (No wrapper divs):

Code:

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

Bootstrap 5 Color System

Modern Button Colors:

Code:

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

Bootstrap 5 Color Variants:

Code:

$("input[name='demo9']").TouchSpin({
  buttondown_class: "btn btn-info",
  buttonup_class: "btn btn-warning",
  prefix: "Qty:",
  postfix: " items"
});

Advanced Features

Large Input Group:

$ .00

Code:

<div class="input-group input-group-lg">
  <span class="input-group-text">$</span>
  <input ... class="form-control">
  <span class="input-group-text">.00</span>
</div>

With Floating Label:

Floating Label

Code:

<div class="form-floating">
  <input class="form-control" placeholder="Enter value">
  <label>Floating Label</label>
</div>

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

Performance Booster:

Code:

$("input[name='demo12']").TouchSpin({
  min: 0,
  max: 50000,
  step: 25,
  booster: true,
  boostat: 2,
  maxboostedstep: 2500,
  postfix: " GB"
});

Form Validation

Bootstrap 5 Validation:

Perfect score!

Invalid State:

Value too low, minimum is 20.

Bootstrap 5 Specific Build

Version-Specific Build

This demo uses the Bootstrap 5 specific build (jquery.bootstrap-touchspin-bs5.js) with optimized input group structure for best performance.