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:

design-a-slider

How to design a slider

To create a slider in your Justinmind prototype:

  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, 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 in the Properties palette (changing its size and color) to match our example.customize-the-ellipse-element
  4. Group these two elements together by select them, right-clicking and selecting “Group” from the menu.
    • group-elements-together
  5. 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”.
  6. Click “Simulate” to interact with your slider. Slide it left and right across the slider bar.

You can download our example here.