Spin Numbers With Plus/Minus Buttons - jQuery Number Spinner

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.

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.

  • Publication date: 13.12.2018
  • Source