Vue component for numbers input

Last update: May 7, 2021

@smartweb/vue-number-input

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

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"
>
	
	<template #button-decrease>
		<custom-decrease-button>custom-decrease-button>
	template>

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

GitHub

https://github.com/smwbtech/vue-number-input
You might also like...

:clipboard: A schema-based form generator component for Vue.js

:clipboard: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example CodePen simple example Features reactive forms bas

Aug 7, 2022

a vue form component just like json-editor

vue-awesome-form a vue form component just like json-editor Install # npm/yarn npm install vue-awesome-form yarn add vue-awesome-form Use register th

Feb 8, 2021

A configurable & lightweight Vue wrapper component that enables

A configurable & lightweight Vue wrapper component that enables

vue-email-autocomplete A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elemen

Jul 19, 2022

GitHub buttons component for Vue.

Vue GitHub Buttons GitHub buttons component for Vue. Vue GitHub Buttons Installation Demo Usage Using with Nuxt Module options css useCache Using with

Oct 24, 2021

Unofficial github:button component for Vue.js

Unofficial github:button component for Vue.js

May 30, 2022

Vue dynamic nested form component, support nested Object/Hashmap/Array.

Vue dynamic nested form component, support nested Object/Hashmap/Array.

Introduction vue-dynamic-form-component is a dynamic form component base on element-ui and async-validator. You just need to write descriptors(referen

Aug 11, 2022

a comprehensive vue.js form component

Vue Formular Note: Users of Vus.js version 2 please use this package instead This vue.js package offers a comperhensive solution for HTML form managem

Dec 10, 2019

Lightweight material design checkbox component for Vue

⭐️ Vue material checkbox ⭐️ Material design checkbox component for Vue Demo ✅ Here is demo with all features Breaking changes from v1 Rename plugin de

Jun 30, 2021

Vue.js Commerce.js plugin and wrapper chec-payment-form component for checkout flow

Vue.js Commerce.js plugin and wrapper chec-payment-form component for checkout flow

Jul 12, 2022
International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/
International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/

vue-tel-input International Telephone Input with Vue. Documentation and live demo Visit the website Getting started Install the plugin: npm install vu

Aug 7, 2022
A VueJs plugin that modify input fields, allowing to input only digit data.

vue-input-digit This is a VueJs plugin that modify input fields, allowing to input only digit data. Install To install this plugin you should get in f

May 11, 2021
Simple input checkbox Vue.js component.

Simple input checkbox Vue.js component.

Dec 22, 2021
Great pincode input component
Great pincode input component

vue-pincode-input Great pincode input component for Vue.js applications. Demo on GitHub Pages Features configurable length (symbols count) override-fr

Jul 15, 2022
Very simple vuejs component that creates custom input fileds
Very simple vuejs component that creates custom input fileds

Input fields for vue.js documentation: https://gaidadei.ru/inputv npm: https://www.npmjs.com/package/@vgaidadei/inputv how install: https://www.youtub

Feb 23, 2022
A phone number input made with Vue JS (format & valid phone number)
A phone number input made with Vue JS (format & valid phone number)

vue-phone-number-input A beautiful text field to format phone numbers made with VueJS NEW VERSION ON MY NEW LIBRARY: MAZ-UI The new version of VuePhon

Aug 7, 2022
A beautiful input made with Vue JS
A beautiful input made with Vue JS

vue-input-ui A beautiful input made with Vue JS Demo Enjoy Installation Using yarn yarn add vue-input-ui Using npm npm i --save vue-input-ui Usage ES6

Aug 7, 2022
A light replacement for built-in textarea and input elements allowing them to automatically grow to fit the content.

Vue Autosizer A light (2.2kB) and dependency-free replacement for built-in <textarea> and <input> elements allowing them to automatically stretch to f

Feb 14, 2022
Search input field that parses query strings

@tillhub/vue-search-filter Vue search input with dropdown for more filters Install npm install --save @tillhub/vue-search-filter Usage Please see src/

May 6, 2022
VueJs for tags input.

docs for vue-tags-input VueJs for tags input. Installation Available through: $ yarn add vue2-tags-input $ npm install vue2-tags-input For Modules imp

Nov 25, 2021