Bootstrap Input Spinner Plugin

A Bootstrap 4 / jQuery plugin to create input spinner elements for number input.

Demo Page Project Link

The following contains examples of the InputSpinner's main features

Simple Integer

Floating Point

Handle change and input events and read the value from JavaScript with val()

Type in a number to see the difference between change and input events.

Value on input:
Value on change:

Programmatic changing the value with val()


Gross (+19%)

Attributes placeholder and required

Attribute disabled, dynamically changing

Attributes are handled dynamically.

Dynamically handling of the class attribute

Try to change the class to "is-invalid" or "text-info".


Sizing works out of the box. Just set the original inputs class to form-control-sm or form-control-lg, and the resulting group gets the class input-group-sm or input-group-lg.



Dynamically handling of min, max, step and data-decimals

Prefix and Suffix



Attribute data-step-max and looping the value

This Input starts from 0 when reaching 360.

Use the data-step-max attribute to limit the step velocity.

"Loop" the value between 0 and 360 with the change event in JavaScript.