Vue-number-stepper NPM

Vue Number Stepper

Feature complete iOS-style stepper control for Vue.js

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.

node-sass sass-loader

@infinitebrahmanuniverse/nolb-vue-n @everything-registry/sub-chunk-3087

0.9.0

4 years ago