@smartweb/vue-number-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

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

LICENSE

The MIT License (MIT). Please see License File for more information.