Input Number Spinner with jQuery and Bootstrap - Spinner

Spinner is a jQuery spinner plugin worked with Bootstrap 3 (OPTIONAL) that allows you to create input spinner components using number inputs.

<p><a href="https://www.jqueryscript.net/form/Input-Spinner-Plugin-Bootstrap-4.html">Bootstrap 4 Version</a> is now Available!</p>

Features:

• Arrow-up for increment
• Arrow-down for decrement
• Press Arrows or Left-mouse cause continuous changing.
• Custom spinner rules.

See also:

• Touch-Friendly jQuery Input Spinner Plugin For Bootstrap 3 - TouchSpin

Built-in rules:

• currency: {min: 0.00, max: null, step: 0.01, precision: 2},
• quantity: {min: 1, max: 999, step: 1, precision:0},
• percent:  {min: 1, max: 100, step: 1, precision:0},
• month:    {min: 1, max: 12, step: 1, precision:0},
• day:      {min: 1, max: 31, step: 1, precision:0},
• hour:     {min: 0, max: 23, step: 1, precision:0},
• minute:   {min: 1, max: 59, step: 1, precision:0},
• second:   {min: 1, max: 59, step: 1, precision:0}

Basic Usage:

1. Include jQuery javascript library and jQuery spinner plugin on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.spinner.js"></script>
<link href="bootstrap-spinner.css" rel="stylesheet">

2. Include Twitter's bootstrap framework on your web page.(OPTIONAL)

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

3. Create the html for an input number spinner.

<div class="input-append spinner" data-trigger="spinner">
<input type="text" value="1" data-rule="quantity">
<div class="add-on"> <a href="javascript:;" class="spin-up" data-spin="up"><i class="icon-sort-up"></i></a> <a href="javascript:;" class="spin-down" data-spin="down"><i class="icon-sort-down"></i></a> </div>
</div>

4. Create the html for an input number spinner.

<div class="input-append spinner" data-trigger="spinner">
<input type="text" value="1" data-rule="quantity">
<div class="add-on"> <a href="javascript:;" class="spin-up" data-spin="up"><i class="icon-sort-up"></i></a> <a href="javascript:;" class="spin-down" data-spin="down"><i class="icon-sort-down"></i></a> </div>
</div>

Change logs:

2015-11-23

• Supports button tag for spin

2015-03-11

• bugfix

2015-03-05

• to allow pass the step options as a function

2014-02-20

• Added support for disabled input fields

---

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