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.
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.
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’.
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:
- Click on the custom slider icon (the image widget) and select ‘Add event‘
- On the first menu, select a ‘Mouse > On Drag’ event.
- 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.
- Mark the ‘Constraint by parent container‘ checkbox to ensure the image does not move past the bounds of the group.
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.