Vue.js Input Spinner Component

A customizable number input spinner component for VueJS applications.

How to use it:

1. Import and register the component.

import NumberInputSpinner from 'vue-number-input-spinner';
export default {
  components: {
    NumberInputSpinner,
  },
  // ...
}

2. Add the NumberInputSpinner component to the app.

<NumberInputSpinner />

3. Possible component props.

value: {
  type: Number,
  default: 0
},
min: {
  default: 0,
  type: Number
},
max: {
  default: 10,
  type: Number
},
step: {
  default: 1,
  type: Number
},
mouseDownSpeed: {
  default: 100,
  type: Number
},
inputClass: {
  default: 'vnis__input',
  type: String
},
buttonClass: {
  default: 'vnis__button',
  type: String
},
integerOnly: {
  default: false,
  type: Boolean
},
disabled: {
  default: false,
  type: Boolean
}

Preview:

Vue.js Input Spinner Component

Changelog:

v2.2.0 (08/18/2022)

  • Update

Download Details:

Author: ZestfulNation

Live Demo: https://zestfulnation.github.io/vue-number-input-spinner/

Download Link: https://github.com/ZestfulNation/vue-number-input-spinner/archive/refs/heads/master.zip

Official Website: https://github.com/ZestfulNation/vue-number-input-spinner

Install & Download:

npm install vue-number-input-spinner

Add Comment