Spin Numbers With Plus/Minus Buttons - jQuery Number Spinner
| File Size: | 4.58 KB |
|---|---|
| Views Total: | 9243 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Just another jQuery based number spinner plugin that enables your users to spin numbers with plus and minus buttons.
How to use it:
1. Install and save the plugin in your project.
$ npm install html-number-spinner --save
2. Import the jQuery Number Spinner plugin into the html document.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src="plugin.js"></script>
3. Create an empty container in which you want to place the number input.
<div id="example" class="counter"></div>
4. Initialize the plugin to generate a number spinner inside the container.
$(function(){
$("#example").htmlNumberSpinner();
});
5. The plugin also supports the native min, max and step attributes:
<div id="example"
class="counter"
min="1"
max="10"
step="2">
</div>
6. Style the number input by overriding the default CSS styles.
.number-input {
"background-color":"white",
"border": "1px solid",
"color":"black",
"text-align":"center",
"width":"55px",
"font-size":"18px",
"line-height":"normal",
"padding":"0",
"outline":"none",
"border-left-color": "hotpink",
"border-right-color": "slateblue",
"border-top-color": "lightblue",
"border-bottom-color": "lightblue"
}
This awesome jQuery plugin is developed by umarfarookm. For more Advanced Usages, please check the demo page or visit the official website.











