Touch-Friendly jQuery Input Spinner Plugin For Bootstrap 3/4 - TouchSpin

File Size: 134 KB
Views Total: 30459
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Touch-Friendly jQuery Input Spinner Plugin For Bootstrap 3/4 - TouchSpin

TouchSpin is a jQuery plugin for Bootstrap 3 and Bootstrap 4 to create a touch-friendly spinner widget that wraps a text input with two buttons to increment and decrement the current value.

See also:

Basic Usage:

1. Include jQuery javascript library and jQuery touchSpin plugin on the web page

<script src=""></script>
<script src="bootstrap-touchspin/bootstrap.touchspin.js"></script>

2. Include required Twitter's Bootstrap 3 on the web page

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<script src="bootstrap/js/bootstrap.min.js"></script>

3. Create a input field for the spinner wigeht

<input id="demo" type="text" value="99" name="demo">

4. Call the plugin with options


  // Minimum value.
  min: 0, 

  // Maximum value.
  max: 100, 

  // Applied when no explicit value is set on the input with the value attribute. 
  // Empty string means that the value remains empty on initialization.
  initval: '',
  replacementval: '',

  // Number of decimal points.
  decimals: 0,

  // none | floor | round | ceil
  forcestepdivisibility: 'round', 

  // Enables the traditional up/down buttons.
  verticalbuttons: false,

  // Class of the up button with vertical buttons mode enabled.
  verticalupclass: 'glyphicon glyphicon-chevron-up',

  // Class of the down button with vertical buttons mode enabled.
  verticaldownclass: 'glyphicon glyphicon-chevron-down',

  // Boost at every nth step.
  boostat: 5, 

  // If enabled, the the spinner is continually becoming faster as holding the button.
  booster: true,

  // Maximum step when boosted.
  maxboostedstep: 10, 

  // Text after the input.
  postfix: '%', 

  // Text before the input.
  prefix: '$', 

  // Extra class(es) for prefix.
  prefix_extraclass: '',

  //  Extra class(es) for postfix.
  postfix_extraclass: '',

  // Incremental/decremental step on up/down change.
  step: 1, 

  // Refresh rate of the spinner in milliseconds.
  stepinterval: 100, 

  // Time in milliseconds before the spinner starts to spin.
  stepintervaldelay: 500,

  //  Enables the mouse wheel to change the value of the input.
  mousewheel: true,

  //  Class(es) of down button.
  buttondown_class: 'btn btn-default',

  //  Class(es) of up button.
  buttonup_class: 'btn btn-default',

  // Text for down button
  buttondown_txt: '-',

  // Text for up button
  buttonup_txt: '+'

5. API events.

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

6. Callbacks.

$("input").trigger("touchspin.updatesettings", {max: 1000});
  • 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.


v4.7.1 (2023-05-25)

  • Better RTL support
  • Refactored vertical button handling
  • Better support for initializing with existing input group addons

v4.7.0 (2023-05-25)

  • Firing the min and max events as soon as the value reaches the minimum or the maximum.

v4.6.1 (2023-04-09)

  • Bugfixes

v4.6.1 (2023-04-07)

  • Bugfixes

v4.6.0 (2023-04-05)

  • Fixing bugs with readonly inputs

v4.5.4 (2023-04-04)

  • Adding support for the min/max/step attributes on an input
  • If step is other than 1 then min and max values will be tweaked to be sure they are divisible by step

v4.5.0/2/3 (2023-04-04)

  • Bugfixes

v4.4.0 (2023-03-30)

  • Bugfix

v4.3.0 (2020-04-10)

  • Bugfix

v4.2.5 (2018-04-27)

  • Fixed: Starts spinning when mouse is kept hovering over button after click

v4.2.3 (2018-04-23)

  • radius of input field not correct + strange borders between buttons

v4.2.0 (2018-04-15)

  • Fixed TouchSpin('destroy') does not work.

v4.0.2 (2018-04-05)

  • Update

v4.0.0 (2018-03-31)

  • Bootstrap 4 support

v3.1.1 (2016-08-29)

  • update

v3.0.1 (2016-01-19)

  • update

v2.8.0 (2014-03-31)

  • Cleanup and styling.

v2.7.1 (2014-03-30)

  • Fixed updatesettings with empty inputs.

v2.6.1 (2014-01-29)

  • reverting latest changes...

v2.5.1 (2014-01-29)

  • fixed: IE9 resizes some input on hovering +- buttons

v2.4.0 (2013-12-13)

  • update to the latest version.

v2.3.0 (2013-12-12)

  • new setting: initval

v2.2.0 (2013-12-11)

  • Fixed: Need setting for button class

v2.1.0 (2013-12-06)

  • Support for different input sizes

v2.0.0 (2013-12-04)

  • The plugin now can be initialized on an input-group.

v1.3.5 (2013-12-03)

  • fixed: Update settings after initialization

v1.3.4 (2013-11-26)

  • Now can add extra class(es) for prefix and postfix.

v1.3.3 (2013-11-22)

  • fixed can't init with empty value

v1.3.0 (2013-10-31)

  • Improved touch event handling.

v1.2.1 (2013-10-11)

  • Added decimal support.
  • Fixed android bug with body background image save popup when holding the buttons.

v1.1.0 (2013-10-10)

  • fixed mousewheel

This awesome jQuery plugin is developed by istvan-ujjmeszaros. For more Advanced Usages, please check the demo page or visit the official website.