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

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.