Designing a before and after image slider

With Justinmind, you can create a before and after image slider in your prototypes.

 

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

To create a before and after image slider in your prototypes, follow the steps below:

  1. Create a new iPhone mobile app prototype.
    • Drag a header to the top of the screen from the iOS  Widgets library. This will be your mobile prototype’s header.
    • Select the screen from the Outline palette and go to the Properties palette.
    • Change the background color of the screen to black.
  2. Next, drag a Dynamic Panel to the canvas, center it just below the header.
    • 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 so that it fills the panel.
    • From the Outline palette, 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.
    • Make sure that the Dynamic Panel containing the grayscale image is positioned above the other within the first Dynamic Panel in the Outline palette.
    • mobile-wireframe-dynamic-panel
  3. Now, drag an Ellipse and Line widgets 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 element in the Outline palette, customize them as preferred and group them inside a Dynamic Panel. 
    • Rename this group “Slider-Bar_2” in the Properties palette.
    • 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 Ellipse 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 SSlider-Bar-mainS in the Properties palette.
  5. Finally add a variable from the Variables palette by clicking on the ‘+’ icon.
    • Name it “SlideValue” and type the number ‘0’ into the Default Value input box.
    • Click “OK”.
    • mobile-wireframe-variables
  6. Ensure that the elements in the Outline palette are in the following order:
    • Header
    • Slider-Bar-main
    • Dynamic Panel
    • mobile-wireframe-outline
  7. Select the Ellipse inside the “Slider-Bar_2” Dynamic Panel group and go to the Events palette.
    • Add an “On Drag” + “Move” event, selecting the Ellipse.
    • Below, change the Left position to “With cursor” and the Top to “Current”.
    • Tick the “Constraint by parent container”.
    • Click “OK”.
  8. 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 element you wish to insert into another.
    • When more options appear below, select the panel containing the Ellipse and Line elements from within the “Slider-Bar_2” Dynamic Panel group.
    • Click “OK”.
    • mobile-wireframe-insert-into
  9. 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 when the Expression builder appears, addthe following expression:
    • Drag the Ellipse to the first term in the conditional expression (change the option in the drop down to ‘PosX relative’)
    • Drag the “Multiply” function to the next term, followed by the “Window Width” constant and the “Division” function.
    • Next, drag the panel containing the Ellipse and Line elements 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 term (this number should correspond to the width/height of your Ellipse).
    • Click “OK” twice.
    • 1-mobile-wireframe-set-value-event
  10. 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”
    • In the Condition builder, drag the “SlideValue” variable to the term in the conditional expression.
    • 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”.
  11. Add another “On Drag” + “Resize” event, selecting the panel containing the grayscale Image.
    • Below, change the Width position to “Calculated”
    • Type the number ‘375’ into the first term (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.
    • Click “OK” and change the Height position to “Current”, and click “OK” again.
    • Change the link between the two “On Drag + Resize” events to “WITH previous”.
    • mobile-wireframe-resize-events
  12. 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”.
    • When the Condition builder appear, type the number ‘0’ into the first term, followed by the “Minus” function and finally the ‘”SlideValue” variable to the conditional expression.
    • 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 can download our example here.