Skip to main content
Steppers
Updated over a week ago

A stepper is a control that lets you increase and decrease a value. Our stepper element lets you use Apple’s native stepper in your design.

Values

There are four values for a stepper that you can adjust in Play: start, step, min, and max.

  • The Start value is the stepper’s value when it has not yet been interacted with. It will be reflected in the original output text.

  • The Step value is the increment between each number in the range.

  • The Min value is the bottom of the stepper’s range.

  • The Max value is the top of the stepper’s range.

Wrap

If the Wrap attribute is on, the stepper will start over when it hits the beginning or end of the stepper’s range. For example, when the stepper’s value passes the max value of 10, it will start over at the minimum value of 0.

Auto Repeat

When Auto Repeat is turned on, the Stepper will continue to increment when you press and hold down the + or -.

Saving or Displaying a Stepper's Value

You can save the value of your stepper as a variable and use it throughout your page or project. You can also display a stepper's output in a text element using interactions. On a stepper's Stepper Event trigger, set the Event as Any.

Add a Set Text action to the Slider Event trigger. Target a text element, and enter the following expression into the Text property's Expression Editor:

StepperName.value

Did this answer your question?