Touch-friendly Input Spinner With Custom Controls - inputArrow

The inputArrow jQuery plugin converts the normal text field into a highly customizable, mobile-friendly input spinner with custom increment and decrement buttons.

More features:

• Min/max values.
• Step size.
• Callback functions.
• Prefix and suffix.
• Touch-enabled.
• Continuously increase/decrease values as the buttons are pressed.

How to use it:

1. Download and place the JavaScript file jquery.inputarrow.js after loading jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jquery.inputarrow.js"></script>

2. Just call the plugin on the text input field and done.

<input type="text" name="" value="0" class="inputarrow" id="example">

$('#example').inputarrow();

3. Customize the increment and decrement buttons.

$('#example').inputarrow({
  renderPrev: function(input) {
    return $('<span class="custom-prev">Prev</span>').insertBefore(input);
  },
  renderNext: function(input) {
    return $('<span class="custom-next">Next</span>').insertAfter(input);
  },
  disabledClassName: 'custom-disabled'
});

4. Append custom text to the end of the numeric value.

$('#example').inputarrow({
  encodeValue: function(value) {
    if (value === 'no bananas') {
        return 0;
    }
    return value.replace(/^(.*?)\sbananas?$/, '$1');
  },
  decodeValue: function(value) {
    if (value === 0) {
        return 'no bananas';
    }
    var unit = (value === 1) ? 'banana' : 'bananas';
    return value + ' ' + unit;
  },
  onChange: function(newValue, oldValue) {
    console.info('change from', oldValue, 'to', newValue);
  },
  onIterate: function(newValue, oldValue) {
    console.info('iterate from', oldValue, 'to', newValue);
  }
});

5. Customize the min & max values.

$('#example').inputarrow({
  min: 10, // default: 0
  max: 100 // default: Infinity
});

6. Customize the step size. Default: 1.

$('#example').inputarrow({
  step: 5
});

7. More customization options and callback functions.

$('#example').inputarrow({

  // uses empty string instead of minimum value
  emptyOnMin: false,

  // uses comma
  comma: false,

  // fluent mode options
  // continuously increase or decrease value as the button is pressed
  gradientFactor: 1.1,
  gradientDefault: 1,
  gradientMax: 20,

  // delay in milliseconds
  delay: 300,

  // interval between iterations in fluent mode
  interval: 120

});

Changelog:

2021-01-24

• fix double counter touch on mobile

---

This awesome jQuery plugin is developed by nikitanickzhukov. For more Advanced Usages, please check the demo page or visit the official website.