smwbtech@smartweb/vue-number-input
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
Live Demo
Download
Use npm
npm i @smartweb/vue-number-inputOr via cdn
<script src="https://unpkg.com/@smartweb/vue-number-input/build/vue-number-input.umd.min.js"></script>Configuration
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');Usage
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 <input/> element. |
| min | Number | Number.MIN_SAFE_INTEGER | Minimum value of the number range. Provides a value for 'aria-valuemin' attributes of <input/> element. |
| max | Number | Number.MAX_SAFE_INTEGER | Maximum value of the number range. Provides a value for 'aria-valuemax' attributes of <input/> element. |
| step | Number | 1 | Incremental step |
| disabled | Boolean | false | Defines a value for 'aria-disabled' and 'disabled' attributes of <input/> element. Also disable controls buttons |
| readonly | Boolean | false | Defines a value for 'readonly' attribute of <input/> element. |
| autofocus | Boolean | false | Defines a value for 'autofocus' attribute of <input/> 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 |
Example
<vue-number-input
v-model="you_model"
:value="50"
:min="0"
:max="100"
:controlsPosition="'left'"
/>For more examples visit demo page
Your own controls through slot
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>Events
| 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 |
LICENSE
The MIT License (MIT). Please see License File for more information.