Easy Stylable jQuery Number Input Spinner Plugin - Numble

Numble is a fast, simple jQuery plugin for transforming the normal number input into an enhanced input spinner with increment / decrement controls and mouse scroll wheel handling.

How to use it:

1. Include the jQuery numble plugin after jQuery library is loaded in your document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/jquery.numble.js"></script>

2. Call the function on your number input.

$("input[type=number]").numble();

3. Style the input spinner whatever you like.

.numble-control {
  width: 270px;
  height: 21px;
  padding: 20px;
  border: 1px solid #ccc;
  color: #fff;
  background-color: #E74C3C;
  position: relative;
}

.numble-control .numble-arrow {
  position: absolute;
  right: 10px;
  font-size: 0.8em;
  cursor: pointer;
}

.numble-control .numble-increment { top: 10px; }

.numble-control .numble-decrement { top: 25px; }

4. Available options.

// enables debug mode
debug: false,

// shows up and down arrows
includeButtons: true,

// allows negative number
allowNegative: true,

// maximum value
maxValue: undefined,

// minimum value
minValue: undefined,

// initial value
initialValue: undefined,

// allows mouse scroll event
allowScroll: true,

// numble will display this text for increment
incrementText: "▲",

// numble will display this text for decrement
decrementText: "▼",

// enable content editable
allowEdit: true

Change logs:

2015-09-13

• Readonly support, prevent direct edit beyond min/max

2015-08-12

• Fix minValue bug

2015-07-24

• Allow for direct edit of numble control

2015-07-23

• Implement scroll option

---

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