@smartweb/vue-number-input

Vue number input component with great accessibility: ARIA, control by keyboard and wheel

Usage no npm install needed!

<script type="module">
  import smartwebVueNumberInput from 'https://cdn.skypack.dev/@smartweb/vue-number-input';
</script>

README

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