Designing a slider

With Justinmind, you can create an interactive slider in your prototypes. Learn how to make your own by following the steps below:
design-a-slider

  1. In a new prototype, drag a Rectangle from the Widgets library palette to the Canvas. This element will act as the slider bar.drag-rectangle-to-canvas
  2. In the Properties palette, set its height, width, and color according to your preferences. To match our example, give your slider bar rounded borders.customize-the-rectangle-element
  3. 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 as you’d like in the Properties palette.customize-the-ellipse-element
  4. Group these two elements together by selecting them, then right-click and select “Group” from the menu.group-elements-together
  5. From the Outline palette, select the Ellipse from within the group and go the Events palette. Follow these steps to make the slider interactive:

    1. Click the “Add Event” button and add an “On Drag” + “Move” event, selecting the Ellipse as the target of “Move” action (it should be selected by default).
    2. Below, set the X position to “With cursor” to allow the icon to move horizontally.
    3. Set the Y position to “Current” so the icon’s vertical position remains fixed when dragging it horizontally.
    4. Check the “Constraint by parent container” checkbox to ensure the image does not move past the bounds of the group. Click “OK”.

  6. Click “Simulate” to interact with your slider. Slide it left and right across the slider bar.

You can download our example here.