Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create a before and after image slider in your prototypes

Learn how to create and simulate a before and after image slider in your interactive web and mobile prototypes with the help of this tutorial.

In an earlier tutorial, we showed you how to create a custom slider bar and in this an advanced price slider that allows the user to choose their price range.

In this tutorial, compare two different images within the same frame with an interactive slider built with Justinmind. Users will be able to visualize a before and after perspective of two different views. It’s easy to create and set up for mobile as well as web. Follow the steps below to create a mobile image slider that allows the user to change the saturation of an image. Note that you will need a color and grayscale version of the same image to follow our steps. 

You can download the below example here.

create-a-before-and-after-image-slider-in-your-prototypes

Creating your before and after image slider

1. Create a new iPhone 6 mobile app prototype. Drag a header to the top of the screen from the iOS 9 widgets library. This will be your mobile prototype’s header. From the Properties tab, change the background color of the Screen to black, (select the Screen from the Outline tab).

2. Next, drag a dynamic panel to the canvas, center it on screen, just below the header, and resize it to 750 x 493 px. Change the layout to horizontal. Add an additional dynamic panel inside this one, place it on the left inside the first dynamic panel and resize it to 375 x 493 px. Make sure the layout is set to free. Add a colored image inside this dynamic panel, filling the panel. From the Outline tab, copy and paste this dynamic panel inside the first so that there are two additional dynamic panels inside the first. Place the third dynamic panel on the right inside the first dynamic panel and change the image so that it is a grayscale version of the current. These images are the ones that the user will be able to view depending on how they navigate the image slider.

Important: Make sure that the dynamic panel containing the grayscale image is positioned above the other within the first dynamic panel in the Outline tab.

mobile-wireframe-dynamic-panel

3. Now, drag an ellipse and a line widget to the canvas and position them together to present a slider and the slider bar: these represent your image slider. Ensure that the ellipse is positioned above the line widget in the Outline tab, customize them as preferred and group them inside a dynamic panel. Rename this group ‘Slider-Bar_2’ in the Properties tab.

Tip: if matching our example, the width/height of your ellipse should be 25 px respectively. You will need to know the width/height of the widget when creating an expression later on in the tutorial.

mobile-wireframe-composition

4. Add two image widgets to the canvas and place them on either side of the image slider. In the left image, add an icon that represents ‘low saturation’ of the image and in the right, ‘high saturation’. Then, ensure that the ‘Slider-Bar_2’ dynamic panel group is positioned above the SVG images and then group all of these elements together. Rename this group ‘Slider-Bar-main’ in the Properties tab.

5. Finally add a variable from the Variables tab by clicking on the ‘+’ icon. Name it ‘SlideValue’ and type the number ‘0’ into the default value input box.

mobile-wireframe-variables

Ensure that the elements in the Outline tab are in the following order:

  • Header
  • Slider-Bar-main
  • Dynamic panel

mobile-wireframe-outline

Adding events to your prototype to make it interactive

1. Navigate to the ellipse widget inside the ‘Slider-Bar_2’ dynamic panel group and go to the Events tab. Add an “On Drag” + “Move” event, selecting the ellipse widget. Below, change the Left position to ‘With cursor’ and the Top to ‘Current’. Tick the ‘Constraint by parent container’. Click OK.

2. Now, add another event by right clicking on this event and select the “Add action after selected” option. Add an “On Drag” + “Insert Into” event. Select the ellipse as the widget you wish to insert into another. When more options appear below, select the panel containing the ellipse and line widget from within the ‘Slider-Bar_2’ dynamic panel group. Click OK.

mobile-wireframe-insert-into

3. Next, add another event as you did before. Add an “On Drag” + “Set Value” event. From the Variables tab, select the ‘SlideValue’ variable. Below, set the value as calculated and add the following expression:

Drag the ellipse to the first position in the expression builder (change the option in the drop down to ‘PosX relative’), followed by the MULTIPLY function. Next, drag the WINDOW WIDTH constant and then the DIVISION function. Next, drag the panel containing the ellipse and line widget from within the ‘Slider-Bar_2’ dynamic panel group (change the option in the drop down to ‘Width’), the MINUS function and finally, type the number ’25’ into the last position (this number should correspond to the width/height of your ellipse widget). Click OK twice.

1-mobile-wireframe-set-value-event

4.  Now, add another event after the one you’ve just created. Add an “On Drag” + “Resize” event, selecting the panel containing the colored image. Below, change the Width position to ‘Calculated’ and drag the ‘SlideValue’ variable to the expression builder and click OK. Change the Height position to ‘Current’ and click OK again. Change the link between the “On Drag + Set Value” and “On Drag + Resize” events to ‘ WITH previous’.

5. Add another “On Drag” + “Resize” event, selecting the panel containing the grayscale image. Below, change the Width position to ‘Calculated’. Add the following expression: Type the number ‘375’ into the first position (this number corresponds to the width of each of your images and their dynamic panels), followed by the MINUS function and finally the ‘SlideValue’ variable to the expression builder. Click OK and change the Height position to ‘Current’. Then, click OK again and change the link between the two “On Drag + Resize” events to ‘ WITH previous’.

mobile-wireframe-resize-events

6. Finally, add one last event. This will be an “On Drag” + “Move” event, selecting the grayscale image. Below, change the Left position to ‘Calculated’ and the Top to ‘Current’. In the Left position, add the following expression: Type the number ‘0’ into the first position, followed by the MINUS function and finally the ‘SlideValue’ variable to the expression builder. Click OK twice, and change the link between the “On Drag + Resize” and “On Drag + Move” events to ‘ WITH previous’.

1-mobile-wireframe-move-event

And that’s it! Click ‘Simulate‘ to view and interact with your image slider. Drag the ellipse from right to left to see how the image changes from colored to grayscale.

 

You have completed the Conditions and Variables tutorials! Click here to learn how to Set Value and Calculations