ChocolateChip-UI - Documentation

Docs

Everything You Need to Know

Widgets

Stepper

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
});

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.