Everything You Need to Know



A stepper is a small control that allows the user to increase or decrease a value between predetermined values. It's not a picker. It's for when the difference between choices is not great. The user decreases or increase the value by tapping on either side of the stepper.

To create a stepper, use a stepper tag. Prior to verion 4.2.11, you had to use a span with the class "stepper":

<stepper id="digits"></stepper>

// For Chui 4.2.10 and older:
<span class='stepper' id="digits"></span>

To initialize a stepper, we use the $.Stepper() method and pass it three options: min value, max value and default value:

var myStepper = $.Stepper({ 
  element: '#digits', 
  min: 1,
  max: 8,
  defaultValue: 3
Simple  Layout

We can get the current value of the stepper at any time by running val() on the stepper instance. Please note that upto version 4.1.2 you would have instead used getValue():

var stepperValue = myStepper.val();

Take a look at the file "stepper.html" in the examples folder. Read the following instructions for getting the examples.

Stepper Example

See the Pen Stepper for iOS by Robert Biggs (@rbiggs) on CodePen.

Stepper with Android Theme

See the Pen Stepper for Android by Robert Biggs (@rbiggs) on CodePen.