Spin Numbers With Plus/Minus Buttons - jQuery Number Spinner
File Size: | 4.58 KB |
---|---|
Views Total: | 8730 |
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.