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
   
Spin Numbers With Plus/Minus Buttons - jQuery Number Spinner

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.