A customizable Vue 3 number input component with increment/decrement buttons and long-press adjustment.
npm install @mgcodeur/vue-number-input
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 ⬅️
``bash`
npm install @mgcodeur/vue-number-input
---
`vue
:min="0"
:max="20"
:step="1"
:adjustment-speed="400"
input-position="right"
/>
`
| Slot Name | Description |
| ------------ | ----------------------------------- |
| minus-icon | Custom content for the minus button |plus-icon
| | Custom content for the plus button |
| 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. |
| Event | Payload | Description |
| ------------------- | -------- | ---------------------------------- |
| update:modelValue | number | Emitted when the value is updated. |
- 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.
- 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.theme` prop as a class or attribute hook.
- For advanced theming, you can add more modifiers or use the
If you find this component useful, please consider starring the repo:
https://github.com/iharena/vue3-number-picker
!https://nodei.co/npm/@mgcodeur/vue-number-input.png?mini=true