Designing a slider
With Justinmind, you can create a slider to adjust elements in your prototypes. Learn how to make your own by following the steps below:
The slider consists of a slider bar with a slider icon that moves horizontally across the bar:
How to design a slider
To create a slider in your Justinmind prototype:
- In a new prototype, drag a Rectangle from the Widgets library palette to the canvas. This element will act as the slider bar.
- In the Properties palette, set its height, width, color according to your preferences.
- To match our example, give your slider bar rounded borders.
- Drag an Ellipse to the canvas and place it on top of the slider bar. The Ellipse will act as the slider icon.
- Customize it in the Properties palette (changing its size and color) to match our example.
- Group these two elements together by select them, right-clicking and selecting “Group” from the menu.
- From the Outline palette, select the Ellipse from within the group and go the Events palette.
- Click the “Add Event” button and add an “On Drag” + “Move” event, selecting the Ellipse (it should be selected by default).
- Below, set the X position to “With cursor” to allow the icon to move horizontally.
- Set the Y position to “Current” so the icon’s vertical position remains fixed when dragging it horizontally.
- Check the “Constraint by parent container” checkbox to ensure the image does not move past the bounds of the group. Click “OK”.
- Click “Simulate” to interact with your slider. Slide it left and right across the slider bar.
You can download our example here.