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.
npm install number-input-controlsonPlus and onMinus callbacks.
min, max, and step attributes.
bash
npm install number-input-controls
`
$3
Download the script and include it in your project.
`html
`
Usage
$3
`javascript
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',
},
});
`
$3
`html
`
$3
`html
`
$3
| Option | Type | Default | Description |
|--------------------|------------|--------------------------|-------------|
| selector | string | .number-modern | Selector for the number input elements. |
| skin | string | skin-1 | Visual style. Available options: skin-1, skin-2, skin-3, skin-4, skin-bootstrap, skin-bootstrap3. |
| onPlus | function | null | Callback when the plus button is clicked. Receives the updated value as an argument. |
| onMinus | function | null | Callback when the minus button is clicked. Receives the updated value as an argument. |
| bootstrapConfig | object | See below | Configuration for Bootstrap styling. |
$3
| Option | Type | Default | Description |
|--------------------|------------|--------------------------|-------------|
| size | string | '' | Size of the input group (sm, lg, or '' for default). |
| buttonClassMinus | string | btn btn-default | Class for the minus button. |
| buttonClassPlus | string | btn btn-default | Class for the plus button. |
$3
`bash
git clone https://github.com/codevadi/number-input-controls.git
cd number-input-controls
`
$3
To test your changes, open the demo.html` file in a browser and interact with the number input.