touch input spinner arrow - Free Download Touch-friendly Input Spinner With Custom Controls - inputArrow

Free Download Touch-friendly Input Spinner With Custom Controls – inputArrow

Posted on

This time I will share jQuery Plugin and tutorial about Touch-friendly Input Spinner With Custom Controls – inputArrow, hope it will help you in programming stack.

touch input spinner arrow - Free Download Touch-friendly Input Spinner With Custom Controls - inputArrow
File Size: 37.3 KB
Views Total: 1528
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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

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

1 <input type="text" name="" value="0" class="inputarrow" id="example">
1 $('#example').inputarrow();

3. Customize the increment and decrement buttons.

1 $('#example').inputarrow({
2   renderPrev: function(input) {
3     return $('<span class="custom-prev">Prev</span>').insertBefore(input);
4   },
5   renderNext: function(input) {
6     return $('<span class="custom-next">Next</span>').insertAfter(input);
7   },
8   disabledClassName: 'custom-disabled'
9 });

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

01 $('#example').inputarrow({
02   encodeValue: function(value) {
03     if (value === 'no bananas') {
04         return 0;
05     }
06     return value.replace(/^(.*?)sbananas?$/, '$1');
07   },
08   decodeValue: function(value) {
09     if (value === 0) {
10         return 'no bananas';
11     }
12     var unit = (value === 1) ? 'banana' : 'bananas';
13     return value + ' ' + unit;
14   },
15   onChange: function(newValue, oldValue) {
16     console.info('change from', oldValue, 'to', newValue);
17   },
18   onIterate: function(newValue, oldValue) {
19     console.info('iterate from', oldValue, 'to', newValue);
20   }
21 });

5. Customize the min & max values.

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

6. Customize the step size. Default: 1.

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

7. More customization options and callback functions.

01 $('#example').inputarrow({
02  
03   // uses empty string instead of minimum value
04   emptyOnMin: false,
05  
06   // uses comma
07   comma: false,
08  
09   // fluent mode options
10   // continuously increase or decrease value as the button is pressed
11   gradientFactor: 1.1,
12   gradientDefault: 1,
13   gradientMax: 20,
14  
15   // delay in milliseconds
16   delay: 300,
17  
18   // interval between iterations in fluent mode
19   interval: 120
20  
21 });

Changelog:

2021-01-24

  • fix double counter touch on mobile