User-Friendly Number Input Spinner with jQuery and Bootstrap

File Size: 3.03 KB
Views Total: 48637
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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


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