User-Friendly Number Input Spinner with jQuery and Bootstrap

An input spinner component for Bootstrap to extend the default number input that allows the users to easily select a number by clicking the plus/minus buttons.

Bootstrap 4 Version is now Available!

See also:

• Input Number Spinner with jQuery and Bootstrap - Spinner
• Simple Number Spinner with jQuery and CSS3 - Simple Spinner
• Simple Number Spinner Input Plugin For jQuery - DP Number Picker
• Touch-Friendly jQuery Input Spinner Plugin For Bootstrap 3 - TouchSpin
• jQuery Plugin For Selecting Numbers By Typing Or Clicking - spinner

How to use it:

1. Load the necessary jQuery library and Bootstrap's stylesheet on your web page.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

2. Call the plugin on the existing number input and you're done.

$('input').bootstrapNumber();

3. Style the plus/minus buttons using Bootstrap CSS rules.

$('input').bootstrapNumber({

// default, danger, success , warning, info, primary
upClass: 'danger',
downClass: 'success'
center: true
});

Change log:

2017-08-23

• Fix cloning input events, ex: change

2016-01-17

• Fix a Bug about select all text and change

2015-08-04

• JS update.

---

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