@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-input

Or 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 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 |

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.