Default Percent Input
A standard-sized spinner using the original percentage example with a 0.01 step and limits from 0 to 1.
$('#input_1').bsTouchspin({
formatter: 'percent'
});bsTouchspin Bootstrap 5 Input Spinner Demos
Download This Plugin Back To jQueryScript
jQuery Bootstrap 5 spinner plugin with min/max limits, step size, currency and percent formatters, and programmatic value control.
Small Currency Input
The original compact currency example with USD formatting, four visible decimals, and a cent-level step.
$('#input_2').bsTouchspin({
size: 'sm',
formatter: 'currency',
currency: 'USD',
step: 0.01,
decimals: 4
});Large Locked Input
A large spinner that can only be changed through its increment and decrement controls.
$('#input_3').bsTouchspin({
size: 'lg',
allowInput: false
});Quantity With Units
Prefix and postfix labels turn the spinner into a compact quantity selector for product or inventory interfaces.
$('#input_4').bsTouchspin({
min: 0,
max: 24,
step: 1,
prefix: 'Qty',
postfix: 'pcs'
});Custom Action Buttons
Button classes and icons can be replaced to match a product UI without changing the input markup.
$('#input_5').bsTouchspin({
min: 0,
max: 100,
step: 5,
postfix: 'kg',
buttons: customButtons
});Runtime Methods
Use public methods to set a value, update labels, or restore the enhanced input without rebuilding the page.
$('#input_6').bsTouchspin('val', 42);
$('#input_6').bsTouchspin('setPrefix', 'Box');
$('#input_6').bsTouchspin('setPostfix', 'sets');Dynamic Precision
When step is set to any, the plugin can derive precision from the current value and keep small movements usable.
$('#input_7').bsTouchspin({
step: 'any',
min: -1,
max: 1
});Fast Range Control
This range-style spinner uses larger steps, visible bounds, and custom colors for dashboard-style inputs.
$('#input_8').bsTouchspin({
min: 0,
max: 1000,
step: 25,
prefix: 'Level',
buttons: rangeButtons
});