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.

Importing UIStepper Into Your Project

In order to make a segmented button, you'll need to import the UIStepper class class into your project. You do that by by including the following at the top of your app.js file in your project's dev folder:

import {UIStepper} from './src/widgets/ui-stepper'

After importing UIStepper, you are ready to create a 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":

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

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

To initialize a stepper, we use the new UIStepper() class and pass it four options: an element, a min value, a max value and a default value:

const myStepper = new UIStepper({ 
  element: '#digits', 
  min: 1,
  max: 8,
  defaultValue: 3
})

We can get the current value of the stepper at any time with the UIStepper instance value property:

const stepperValue = myStepper.value;

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 V5 by Robert Biggs (@rbiggs) on CodePen.

Stepper with Android Theme

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