Vue Number Stepper

Feature complete iOS-style stepper control for Vue.js

Live demo

Features

• Inspired by Apple's redesigned UIStepper from iOS 13.
• Works with v-model
• Configurable minimum & maximum values
• Works with custom step values (skip by 10, etc.)
• Long press to rapidly tap through values
• Rigorously tested with 100% branch coverage
• Fully accessible and compatible with screen readers

UX tip: Steppers are best for selecting Poisson numbers - small amounts with low variability, such as 0-10. Check out this article for more details

Installation

npm i vue-number-stepper

Usage

<VueNumberStepper 
  v-model="mainDemoStepperValue" 
  :maxValue="42" 
  :minValue="0" 
  :stepSize="1" 
  :isDisabled="false" 
  :holdToAutoTap="true" 
  :autoTapRepeatIncrementMilliseconds="100"/>

Props

All props besides value are optional

Props	Type	Notes
value	Number	The current value of the stepper. v-model takes care of this for you.
maxValue	Number	Must be greater than minValue. Must be divisible by stepSize
minValue	Number	default is 0
stepSize	Number	Must be greater than 0.
isDisabled	Boolean	Use this to disable the control entirely
holdToAutoTap	Boolean	true by default. Use this to disable hold-to-tap
autoTapRepeatIncrementMilliseconds	Number	100 by default. Controls the amount of milliseconds between incerement/decrement events when the button is held down.