vue-number-spinner

Number spinner component for Vue.js.

Usage no npm install needed!

<script type="module">
  import vueNumberSpinner from 'https://cdn.skypack.dev/vue-number-spinner';
</script>

README

vue-number-spinner

npm Download GitHub license GitHub stars

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.

NPM

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