Increasing and decreasing values

With Justinmind, you can increase and decrease the value within an input field in your prototypes.

In our example, the value of the input field increases when the user clicks the button marked with a plus and decreased when the user clicks on the button marked with a minus. You’ll need to create events with expressions to simulate this behavior in your prototype.
increasing deceasring values overall

Increasing and decreasing values

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.
    • Click “Add Event” and add an “On Click” + “Set Value” event, selecting the Input Text Field.
    • Below, click the “Calculated” button and then the “Add expression” link. The Expression builder will appear.
  4. Drag the Input Text Field to the term in the Conditional expression.
    • Drag the “Plus” Function to the right of the term. Enter “1” in the final term and click “OK” twice.
  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.
    • Below, click the “Calculated” button and then the “Add expression” link. The Expression builder will appear.
  6. Drag the Input Text Field to the term in the Conditional expression.
    • Drag the “Minus” Function to the right of the term.
    • Enter ‘1’ in the final term and click “OK” twice.
    • 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.
  7. 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.