Increasing and decreasing values

With Justinmind, you can increase and decrease the value within an Input Text Field in your prototypes. In our example, you can increase the value in the Input Text Field by clicking on the ‘+’ icon, and decrease the value by clicking on the ‘-‘ icon.increasing deceasring values overall
Follow the steps below to simulate this behavior in your prototype:

  1. Create a new web prototype and drag an Input Text Field and two Button widgets to the Canvas. Position them to match our example.increasing decreasing values
  2. Double click on the Input Text Field and write ‘0’ in it. Rename the Button widgets to ‘+’ and ‘-’ respectively.rename-widget increasing decreasing values
  3. Select the ‘+’ Button and go to the Events palette. Add an “On Click” + “Set Value” event, selecting the Input Text Field as the target of the action. For the value below, click the “Calculated” radio button and then the “Add expression” text. You’ll see the Calculated Expression builder appear.
  4. In the builder, drag the Input Text Field to the open space in the expression. Then, drag the “Plus” Function next to it. Type in “1” in the final open space.
  5. Back in the Canvas, select the ‘-’ Button and go to the Events palette. Click “Add Event” and add an “On Click” + “Set Value” event, selecting the Input Text Field as the target of the action. Click the “Calculated” radio button and the “Add expression” text. You’ll see the Calculated Expression builder appear.
  6. Drag the Input Text Field to the open space in the expression. Next to it, drag the “Minus” function, and type in “1” in the final open space.
    Note: 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.

Click “Simulate”. Click the ‘+’ Button to see the value in the Input Text Field increase. Click the ‘-’ Button to see the value in the Input Text Field decrease.

You can download our example here.