smwbtech / vue-number-input

Vue component for numbers input

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