Learn how to prototype web and mobile apps

How to design a custom slider in your interactive wireframes

Design a custom slider in your interactive wireframes using Justinmind. In this tutorial, you will learn how to build it using your own images and shapes.

The simple custom slider is a slider bar with a slider icon that moves horizontally across the bar.

You can download the below example here.


Custom slider for your app prototypes

Add the slider elements to the screen

1. Create a new prototype.

2. Drag a rectangle widget from the basic widgets library onto the canvas.

3. Set its length, width and color according to your preferences. This element will act as the custom slider bar.

Interactive wireframes: custom slider properties

4. The second element should be an image that will act as the custom slider icon. Drag an image widget onto the canvas, select the image of your choice, and place it on top of the slider bar.

Note: if the image widget is not on the front, use the outline panel to move it forward.

5.  Once these elements are correctly placed on the screen, select both of them, right-click and select ‘Group’.

Interactive wireframe: custom slider group

Add the interaction to allow the icon to slide left and right

Now that both elements are located on the screen and correctly adjusted, it’s time to add the interaction. The event that will control the custom slider icon movement will be an “On Drag” + “Move”.

Follow these steps to create the event:

  1. Click on the custom slider icon (the image widget) and select ‘Add event
  2. On the first menu, select a ‘Mouse > On Drag’ event.
  3. In the second drop-down menu, select the ‘Move‘ action and select the icon layer in the Outline. Set the left movement to ‘With cursor‘ to allow the icon to move horizontally. Set the top movement to ‘Current‘ so the slider icon vertical position remains fixed when dragging the custom slider icon.
  4. Mark the ‘Constraint by parent container‘ checkbox to ensure the image does not move past the bounds of the group.

Interactive wireframes: custom slider events


Now you can click on the green ‘Simulate’ button and test the new custom slider in your interactive wireframe!

If you wish to create a slider using the same elements as the tutorial, you can download Justinmind’s logo as part of the Justinmind Press Kit.

Next tutorial > Design a price slider in your prototypes


  1. Nick Chilvers

    September 11, 2015 at 11:19 am


    Is it possible to add an image to an app screen that can then be moved within the app? E.g. a tinder style swipe system where the image can be moved to the left or right which will trigger another screen to appear.


    • Danielle Schneider

      September 13, 2015 at 11:37 pm

      That will likely be very difficult to accomplish through Justinmind’s events. If you can create a .gif of this happening, then you can easily implement it into the prototyping tool.