Easy Stylable jQuery Number Input Spinner Plugin - Numble
File Size: | 65.6 KB |
---|---|
Views Total: | 1538 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.