INumber Demo

Usage:

HTML:

<div id='inumber'>
  <input type='text' />
</div>

You can use attributes:

<div id='inumber'>
  <input type='text' min='1' max='10' step='1' value='2' />
</div>

<div id='inumber-float'>
  <input type='text' step='0.1' value='1.2' min='0.1' max='1.5' />
</div>

JavaScript:

var inumber = new INumber.default("#inumber", {
  decreaseText: '-',
  increaseText: '+',
  float: false,
  decimals: 0,
  locale: '', // navigator.language as default or Intl
  inputPosition: "between", // between, left, right
  init: function(instance) { ... },
  change: function(value, formatValue, el, id) { ... }
});

// Method:
inumber.setValue(2);
inumber.setMin(10);
inumber.setMax(12);

CSS Classes and generating layout:

<div id='inumber' class='inumber'>
  <button type='button' class='inumber-button is-decrease'>-</button
  <input type='number' class='inumber-input' />
  <button type='button' class='inumber-button is-increase'>+</button>
</div>