Learn how to prototype web and mobile apps

How to increment and decrement values in input fields in your interactive prototypes

Increment and decrement the value of an input field in your interactive prototypes with the help of this tutorial.

Increment and decrement values in UI prototypes' input fields

In the example below, the value in the input field is automatically changed by events that make use of the mathematical expressions available in Justinmind.

Let’s see how we can reproduce this in a few easy steps.

You can download an example here.

1. In a new web prototype, drag an Input text field and two Button widgets. 

2. Double click on the Input field and write ‘0’. Rename the Button widgets to ‘+’ and ‘-‘.

3. Select the button ‘+’ and go to the Events tab. Add an ‘On click’ + ‘Set value’ event. Select the Input text field and select the “Calculated” button next to ‘value is’, at the bottom of the events dialog.

4. In the expression builder, drag the Input text field, the ‘+‘ function and then double-click on the circle on the right and write ‘1’. The expression should look like this:

Input incremental value in your prototypes

5. Click OK twice.

6. Follow the same steps for the ‘-‘ button, this time using the ‘-‘ function in the expressions builder.

Input decremental value in your prototypes

Remember, in order to speed up the process, you can also copy and paste the event you created for the ‘+’ button. Just remember to change the function in the expression!

That’s it! Simulate and enjoy!

Next tutorial > Move items from a list to another in your interactive prototypes