Range

It allows user to set a numeric input within a range of number defined by app creator.

Usage

In most of the cases, we simply use "range" component to read user numeric input within a limited range of value and identify the data by storage name. It allows you to get back the user input data by typing ${ NAME YOU DEFINED IN STORAGE NAME } in anywhere of the app.

Action [ Created | Value Changed ]

Simply click the action you want to define and drag components inside.

Created:

Mostly used to define further UI design within the Range.

Value Changed:

It's used to define action when user changed the value.

Example

Call our an alert with specific wordings when user changed the value. The logic is showed below. ( ) is used to define the action we selected and [ ] is used to define the properties we set:

Range -> (Value Changed) -> Alert [Title: Thanks! Content: Your rating is appreciated!]

Properties

Simply click a gear on the right hand corner of related "Range" component to edit the properties.

Default value - Preconfigured a number selected for user.

Min Value - It's used to set the minimal value that user allow to select.

Max Value - It's used to set the maximal value that user allow to select.

Interval - It's used to define the space between each value within a defined range of numbers. By default, the interval is set to 1 so that number will be incremented or subtracted by 1 when user slide the range to right or left corresponding.

Min Track Color - It's used to set the color of slide button when user slide to left.

Max Track Color - It's used to set the color of slide button when user slide to right.