Spinner

Enhance a text input for entering numeric values, with plus/minus buttons and up/down arrows key handling.

About

To create spinner, add attribute data-role="spinner" to HTML input element. You must assign role input to text input input type="text".


                    <input type="text" data-role="spinner">

Spinner step

You can set step for change spinner value with attribute data-step. Value can be integer or float. If your step is float, you can set a number of digits after dot with attribute data-fixed.

Step: 10

Step: 0.756, fixed: 4


                    <p>Step: 10</p>
                    <input type="text" data-role="spinner" data-step="10">

                    <p>Step: 0.756, fixed: 4</p>
                    <input type="text" data-role="spinner" data-step=".756" data-fixed="4">

Min & max values

You can set minimum and maximum values for spinner with attributes data-min-value and data-max-value.

Min: -10, Max: 10


                    <p>Min: -10, Max: 10</p>
                    <input type="text" data-role="spinner" data-min-value="-10" data-max-value="10">

Buttons position

You can set spinner buttons position with attribute data-buttons-position.

Default

Left

Right


                    <p>Default</p>
                    <input type="text" data-role="spinner" data-buttons-position="default">

                    <p>Left</p>
                    <input type="text" data-role="spinner" data-buttons-position="left">

                    <p>Right</p>
                    <input type="text" data-role="spinner" data-buttons-position="right">

Options

Option	Data-*	Default	Desc
`step`	`data-step`	1	Step for change spinner value
`plusIcon`	`data-plus-icon`	<span class='default-icon-plus'>	Icon for plus button
`minusIcon`	`data-minus-icon`	<span class='default-icon-minus'>	Icon for minus button
`buttonsPosition`	`data-buttons-position`	default	Spinner buttons position: default, left, right
`defaultValue`	`data-default-value`	0	Default value, used with method `toDefault()`
`minValue`	`data-min-value`	null	Min value for spinner
`maxValue`	`data-max-value`	null	Max value for spinner
`fixed`	`data-fixed`	0	The count of numbers after dot
`repeatThreshold`	`data-repeat-threshold`	500	Threshold for auto repeat in ms
`hideCursor`	`data-hide-cursor`	false	Hide cursor in input. Important! To change color in this mode, you must overwrite style for input `text-shadow: 0 0 0 @dark;`

Events

Event	Data-*	Context	Desc
`onBeforeChange(val)`	`data-on-before-change`	input	If this function return false, value can't be changed
`onChange(val)`	`data-on-change`	input
`onPlusClick(curr, request, real)`	`data-on-plus-click`	input
`onMinusClick(curr, request, real)`	`data-on-minus-click`	input
`onArrowUp(curr, request, real)`	`data-on-arrow-up`	input
`onArrowDown(curr, request, real)`	`data-on-arrow-down`	input
`onButtonClick(curr, request, real, 'plus\|\|minus')`	`data-on-arrow-down`	input
`onArrowClick(curr, request, real, 'plus\|\|minus')`	`data-on-arrow-click`	input
`onSpinnerCreate(input)`	`data-on-spinner-create`	input

Methods

You can use methods to interact with input component: toDefault(), val(), val(value). disable(). enabled(). toggleState().


                    var input = Metro.getPlugin(el,'taginput');
                    input.val(100);
                    input.toDefault();

Customize

You can customize your input with special attributes:

Option	Data-*	Desc
`clsSpinner`	`data-cls-spinner`	Additional classes for spinner.
`clsSpinnerInput`	`data-cls-spinner-input`	Additional classes for input element.
`clsSpinnerButton`	`data-cls-spinner-button`	Additional classes for spinner buttons.
`clsSpinnerButtonPlus`	`data-cls-spinner-button-plus`	Additional classes for spinner plus button.
`clsSpinnerButtonMinus`	`data-cls-spinner-button-minus`	Additional classes for spinner minus button.


                    <input type="text"
                           data-role="spinner"
                           data-cls-spinner-button="fg-white"
                           data-cls-spinner-button-plus="bg-green"
                           data-cls-spinner-button-minus="bg-red"
                           data-cls-spinner-input="bg-light fg-cyan text-bold"
                           data-plus-icon="<span class='mif-arrow-up'></span>"
                           data-minus-icon="<span class='mif-arrow-down'></span>"
                    >

Additional classes

You can use additional classes to change input size: .input-large and .input-small.

Table of contents