Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vsn4ik/input-spinner
A Number-Spinner, Support keyboard operations and continuous changing.
https://github.com/vsn4ik/input-spinner
continuous delay javascript number-spinner number-steps spinner
Last synced: 20 days ago
JSON representation
A Number-Spinner, Support keyboard operations and continuous changing.
- Host: GitHub
- URL: https://github.com/vsn4ik/input-spinner
- Owner: vsn4ik
- License: mit
- Created: 2013-11-05T10:34:22.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2023-10-04T10:48:50.000Z (about 1 year ago)
- Last Synced: 2024-11-08T22:36:35.254Z (about 1 month ago)
- Topics: continuous, delay, javascript, number-spinner, number-steps, spinner
- Language: JavaScript
- Homepage: https://vsn4ik.github.io/input-spinner/
- Size: 1.07 MB
- Stars: 312
- Watchers: 32
- Forks: 84
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# [Input Spinner](https://vsn4ik.github.io/input-spinner/)
[](LICENSE)
[](https://github.com/vsn4ik/input-spinner/actions/workflows/test.yml)
A Number-Spinner, Support keyboard operations and continuous changing.
## Basic usage, it's very simple
```html
+
-
```
## Getting Started
Download the [production version][production] or the [development version][development].
In your web page:
```html
$('#spinner')
.spinner('delay', 200) // delay in ms
.spinner('changed', function(e, newVal, oldVal) {
// trigger lazed, depend on delay option.
})
.spinner('changing', function(e, newVal, oldVal) {
// trigger immediately
});
+
-
```
## Documentation
### Spinner options
#### delay
> delay to fire changed event in millisecond, default is 500.
#### changed
> changed event handler, the changed event is a lazy-mode event, default is null.
#### changing
> changing event handler, the changing event will be fired immediately, default is null.
### Spinning Options(setup via data-api)
#### min
> the minimum value, default is null.
#### max
> the maximum value, default is null.
#### step
> the changing-value of per-step, if passed as a function, the function will be called within the spinner object scope.
#### precision
> the precision of value
### Built-in rules
```javascript
currency: { min: 0.00, max: null, step: 0.01, precision: 2 },
quantity: { min: 1, max: 999, step: 1, precision:0 },
percent: { min: 1, max: 100, step: 1, precision:0 },
month: { min: 1, max: 12, step: 1, precision:0 },
day: { min: 1, max: 31, step: 1, precision:0 },
hour: { min: 0, max: 23, step: 1, precision:0 },
minute: { min: 1, max: 59, step: 1, precision:0 },
second: { min: 1, max: 59, step: 1, precision:0 }
```
Usage:
```html
```
## Examples
### Work with Bootstrap and Font Awesome
```html
```
### Customize
#### specify a field
```html
```
#### Use hidden field
```html
$('#spinner').spinner('changing', function(e, newVal, oldVal) {
$('#spinner-value').html(newVal);
});
```
#### pass step options as a function
```javascript
// To skip 0
$('#spinner').spinner({
step: function(dir) {
// 'this' references to the spinner object
if ((this.oldValue === 1 && dir === 'down') || (this.oldValue === -1 && dir === 'up')) {
return 2;
}
return 1;
}
});
// or use API syntax
$('#spinner').spinner('step', function(dir) {
// your logic here
});
```
## Copyright and license
Copyright Vasilii A., 2015–2018
Copyright xixilive, 2013–2015
Licensed under [the MIT License][license].
[license]: https://github.com/vsn4ik/input-spinner/blob/master/LICENSE
[development]: https://raw.githubusercontent.com/vsn4ik/input-spinner/master/dist/input-spinner.min.js
[production]: https://raw.githubusercontent.com/vsn4ik/input-spinner/master/dist/input-spinner.js