number-input-controls v1.2.2

Number Input Controls

Number Input Controls is a lightweight and customizable JavaScript plugin for modern number input controls. It supports different visual skins and Bootstrap integration, and can be used in both ES module and non-module environments.

Features

• Customizable skins for a modern look.
• Bootstrap integration for consistent UI.
• Configurable onPlus and onMinus callbacks.
• Works with both ES modules and global scripts.
• Handles min, max, and step attributes.

Installation

Using npm

npm install number-input-controls

Manual Download

Download the script and include it in your project.

<script src="path-to/number-input-controls.js"></script>

Usage

ES Module

import NumberInputControls from 'number-input-controls';

const numberInputControls = new NumberInputControls({
  selector: '.number-modern',
  skin: 'skin-bootstrap',
  onPlus: (value) => console.log('Plus clicked:', value),
  onMinus: (value) => console.log('Minus clicked:', value),
  bootstrapConfig: {
    size: 'sm',
    buttonClassMinus: 'btn btn-primary',
    buttonClassPlus: 'btn btn-success',
  },
});

Non-Module Environment

<script src="path-to/number-input-controls.js"></script>
<script>
  const numberInputControls = new NumberInputControls({
    selector: '.number-modern',
    skin: 'skin-2',
    onPlus: (value) => console.log('Plus clicked:', value),
    onMinus: (value) => console.log('Minus clicked:', value),
  });
</script>

HTML Example

<input type="number" class="number-modern" min="1" max="10" step="1" value="5">

Options

Bootstrap Config Options

Clone the Repository

git clone https://github.com/codevadi/number-input-controls.git
cd number-input-controls

Testing

To test your changes, open the demo.html file in a browser and interact with the number input.

License

NumberInputControls is licensed under the MIT License.

Author

Developed by codevadi, Contributions and feedback are welcome!

Gmail : codevadi@gmail.com Website : prestashopexperts