Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »


1.5.0 • Public • Published


npm npm

Integer input with increment and decrement buttons

Live demo here

This component fits as spinbutton, allowing keyboard functionalities (up/down arrows or page up/down to increment/decrement, home/end to min/max)

Global use

  • npm install
npm install --save vue-integer-plusminus
  • import components
import { IntegerPlusminus } from 'vue-integer-plusminus'
  • declare use or imported components in your vue script
export default {
    components: { IntegerPlusminus },
    methods: ...
  • Use components as described below


Integer plus/minus

<integer-plusminus :min="ipm_min"
    <p>Your value is</p>
    {{ ipm_value }}
    <template slot="decrement">{{ ipm_slot_decr }}</template>
    <template slot="increment">{{ ipm_slot_incr }}</template>
Prop Type Note
min number minimum possible value. Cannot decrement lower. Default is 0
max number maximum possible value. Cannot increment over. Default is undefined
step number Incremental and decremental step. Must be greater than 0. Default is 1
stepIncrement number Incremental step, optional. If greater than 0 (default), this value replaced the 'step' one when incrementing
stepDecrement number Decremental step, optional. If greater than 0 (default), this value replaced the 'step' one when decrementing
vertical Boolean Use vertical layout. Default is false
disabled Boolean Disabled buttons and keys events. Default is false
spinButtonAriaLabel string Set aria-label attribute on value element, optional
incrementAriaLabel string Set aria-label attribute on decrement button element, optional
decrementAriaLabel string Set aria-label attribute on increment button element, optional
formName string Set the 'name' attribute of the form input. Default is 'integerPlusMinus'

This component provide 3 slots

  • Default slot is the middle part when value is usually displayed
  • 'increment' slot is used for increment button. Usually on right for horizontal layout, or top for vertical layout.
  • 'decrement' slot is used for decrement button. Usually on left for horizontal layout, or bottom for vertical layout.

Style could be overwritten using !important css keyword

.int-input-increment {
    background: #5CB85C !important;


  • 'input' on value change
  • 'ipm-increment' on value increment
  • 'ipm-decrement' on value decrement


  • Fork the repository
  • Run npm install
  • You can run npm run dev, site is at http://localhost:8081.
  • Do your stuff
  • When you're done, run npm run build command and commit your work for a pull request.


npm i vue-integer-plusminus

DownloadsWeekly Downloads






Unpacked Size

996 kB

Total Files


Last publish


  • avatar