vue-rolling-number-input

RollingNumberInput is a Vue component that provides a number input field with digits that can be quickly individually adjusted using a mouse wheel or arrow keys on a keyboard. It is ideal for situations such as inputting radio frequencies or distances where users may want to spin through values and need to dynamically change what degree of precision they are modifying.

Attributes

RollingNumberInput

| Attribute | Type | Required? | Default | Usage | |---------------|---------|-----------|-------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------| | allowNegative | Boolean | No | false | true to display the +/- field and allow negative numbers; false to only allow >= 0 | | centerClass | String | No | rolling-number-input-center | CSS class to apply to digits other than the leftmost and rightmost digits | | digitClass | String | No | rolling-number-input-digit | CSS class to apply to all digits | | leftClass | String | No | rolling-number-input-left | CSS class to apply to the leftmost digit | | max | Number | No | undefined | Maximum allowed value; if undefined, will be the largest value that can be displayed in the visible number of digits. | | min | Number | No | undefined | Minimum allowed value; if undefined, will be 0 if allowNegative is false or -max if allowNegative is true. | | name | String | No | empty string | Name of the HTML input for form submission | | precision | Number | No | 0 | Number of digits of decimal precision to display. The precision must be >= 0. | | rightClass | String | No | rolling-number-input-right | CSS class to apply to the rightmost digit | | value | Number | Yes | | Numeric value to display in the field | | width | Number | Yes | | Total number of fields to display; note that this includes the sign and decimal, if negative numbers are allowed or the precision is > 0. The width must be >= 1. |

Demo

https://hatchbed.github.io/vue-rolling-number-input/

Installation

Install the package through NPM:

npm install vue-rolling-number-input

Import it into your project:

import RollingNumberInput from 'vue-rolling-number-input'
import 'vue-rolling-number-input/dist/vue-rolling-number-input.css'

export default {
  components: {
    RollingNumberInput,
  }
}

Usage example:

    <RollingNumberInput
        class="rolling-input"
        :allow-negative="false"
        :max="1000"
        :min="5"
        :width="8"
        :precision="3"
        v-model="fieldValue"
        @change="$emit('change', $event)"
    />