How to design a slider

In this example, you will learn how to create a slider.

Here’s how you build it:

View

  • Select “Rectangle” and shape it to simulate a thick line.
  • Place an “Ellipse” on top of your rectangle and match the beginning of both items.
  • Click on both items holding shift to select them and right-click to show the menu; over the “Group” section, select “Group in Dynamic Panel”.slider-tem

Events:

With the Ellipse selected, go to the Events palette and click “Add event”. 

  1. In the dialog box, click on “Choose Trigger”, hover over the “Mouse” section, and select “on Drag”.
  2. In “Choose Action”, select “Move element” and select the “Ellipse”.
  3. For position “X”, select “With cursor” and for the “Y” menu “Current”, to finish, click on “Prevent item moving outside of its parent’s area”. Click “Ok” to finish creating the event.

Simulate your prototype.