vue license Build Status Coverage Status Size
Vue component for numbers input.
- Accessible: uses ARIA agreements (100% accessibility in lighthouse)
- Use your keyboard to navigate and control
- Use your mousewheel or touchpad to increase or descrease value
- Flexible styling
- Support custom controls through slots
Use npm
npm i @smartweb/vue-number-input
Or via cdn
<script src="https://unpkg.com/@smartweb/vue-number-input/build/vue-number-input.umd.min.js"></script>
Import and register in your component.vue file
import VueNumberInput from '@smartweb/vue-number-input'; export default { components: { VueNumberInput } };
Use it in your template with v-model directive
<template> <div id="app"> <VueNumberInput v-model="you_model" :min="0" :max="100" ></VueNumberInput> </div> </template>
Or register it globally in your application entry point (main.js or as you called it)
import Vue from 'vue'; import VueNumberInput from '@smartweb/vue-number-input'; // Global registration of the component Vue.component('vue-number-input', VueNumberInput); new Vue({ render: h => h(App) }).$mount('#app');
You can bind following props for vue-input-number element
| Prop | Type | Default value | Description |
|---|---|---|---|
| value | Number | 0 | Defines a value for 'value' and 'aria-valuenow' attributes of element. |
| min | Number | Number.MIN_SAFE_INTEGER | Minimum value of the number range. Provides a value for 'aria-valuemin' attributes of element. |
| max | Number | Number.MAX_SAFE_INTEGER | Maximum value of the number range. Provides a value for 'aria-valuemax' attributes of element. |
| step | Number | 1 | Incremental step |
| disabled | Boolean | false | Defines a value for 'aria-disabled' and 'disabled' attributes of element. Also disable controls buttons |
| readonly | Boolean | false | Defines a value for 'readonly' attribute of element. |
| autofocus | Boolean | false | Defines a value for 'autofocus' attribute of element. |
| controlsPosition | String | 'on edge' | Acceptable values: 'on edges', 'left', right'. Defines position of control buttons. |
| inputClass | String | - | Defines user's class for input element |
| buttonIncClass | String | - | Defines user's class for increase button |
| buttonDecClass | String | - | Defines user's class for decrease button |
<vue-number-input v-model="you_model" :value="50" :min="0" :max="100" :controlsPosition="'left'" />
For more examples visit demo page
You can create your own controls and pass them to slots
Read more about slots in official docs
<vue-number-input class="custom-container" v-model="you_model" :inputClass="custom-input" :buttonIncClass="custom-btn-inc" :buttonDecClass="custom-btn-dec" > <!-- slot for decrease button --> <template #button-decrease> <custom-decrease-button></custom-decrease-button> </template> <!-- slot for increase button --> <template #button-increase> <custom-increase-button></custom-increase-button> </template> </vue-number-input>
| Event | Description | Params |
|---|---|---|
| input | Triggered on user input or buttons clicks | Number |
| change | Triggered on value changed and focus leave input element | Number |
| focus | Triggered when user focused on input field | FocusEvent |
| blur | Triggered when focus leave input field | FocusEvent |
The MIT License (MIT). Please see License File for more information.