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:

• Input Number Spinner with jQuery and Bootstrap - Spinner
• Easy Input Spinner Plugin For Bootstrap 4 - InputSpinner.js

Basic Usage:

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

<script src="http://code.jquery.com/jquery-latest.min.js"></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

$("input[name='demo']").TouchSpin({

  // 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.uponce");
$("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.

Changelog:

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.