vue-number-spinner

Number spinner component for Vue.js. The number stepper widget, It allows users to type a value directly, or modify an existing value by spinning with the keyboard, mousewheel.

Installation

npm i vue-number-spinner -S

Import

ES6

import vueNumberSpinner from 'vue-number-spinner'

CommonJS

var vueNumberSpinner = require('vue-number-spinner');

script

<script type="text/javascript" src="vue/dist/vue.min.js"></script>
<script type="text/javascript" src="vue-number-spinner/dist/vue-number-spinner.min.js"></script>
<script type="text/javascript">
    var vueNumberSpinner = window['vue-number-spinner'];
</script>

Basic Usage

script

new Vue({
  el: 'body',
  components: { vueNumberSpinner }
});

html

<!-- step by 1 -->
<vue-number-spinner :min=0 :max=10 :step=1></vue-number-spinner>
<!-- step by 5 -->
<vue-number-spinner :min=0 :max=100 :step=5></vue-number-spinner>

Props

Name	Type	Desc	Example
min	Number	The min value	0
max	Number	The max value	100
step	Number	Increment/Decrement the value by step number	5

keyboard/mousewheel interaction

• Up Increment the value by one step.
• Down Decrement the value by one step.

License

MIT