VueNumberInput

A customizable Vue 3 number input component with increment/decrement buttons, built-in range validation, and long-press adjustment.

➡️ Click here to try the live demo ⬅️

Installation

npm install @mgcodeur/vue-number-input

---

Usage

<template>
  <VueNumberInput
    v-model="value"
    :min="0"
    :max="20"
    :step="1"
    :adjustment-speed="400"
    input-position="right"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueNumberInput } from '@mgcodeur/vue-number-input'
import '@mgcodeur/vue-number-input/dist/themes/default.css'

const value = ref(5)
</script>

Slots

Slot Name	Description
minus-icon	Custom content for the minus button
plus-icon	Custom content for the plus button

Props

Prop	Type	Default	Description
step	number	1	The amount to increment or decrement the value.
min	number	-∞	The minimum allowed value.
max	number	+∞	The maximum allowed value.
placeholder	string	'0'	The placeholder text for the input field.
adjustmentSpeed	number (milliseconds)	100	Interval for repeated adjustment when held (ms).
textAlign	string	'center'	CSS text alignment for the input value.
inputPosition	'center' | 'left' | 'right'	'center'	Position of the input relative to the buttons.

Events

Event	Payload	Description
update:modelValue	number	Emitted when the value is updated.

Styling

• Wrapper:
  .v-number-input
  The main container for the input and buttons.

• Buttons:
  .v-number-input__button
  Applies to both increment and decrement buttons.

• Input field:
  .v-number-input__input
  The main input element for number entry.

• Themes:
  @/src/scss/components/number-input/themes/_default.scss.

Customization Tips

• Override the above classes in your own stylesheet or by updating the SCSS file to match your design system.
• Use the inputPosition and textAlign props to control layout and text alignment via inline styles.
• For advanced theming, you can add more modifiers or use the theme prop as a class or attribute hook.

⭐️ Support

If you find this component useful, please consider starring the repo:
https://github.com/iharena/vue3-number-picker