Slider Control Tutorial

In this tutorial, you'll learn how to make a draggable slider control with a dynamic panel widget.

Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

  1. Open a new RP file and open Page 1 on the canvas.

  2. Drag a horizontal line widget onto the canvas from the Libraries pane. Set its width to 400 and its border thickness to 5.

  3. Drag an ellipse widget onto the canvas and set both its width and height to 25.

  4. Select both the line and the ellipse. Click the Align Middle icon at the top of the interface, and then click the Align Center icon.

  5. Right-click the ellipse and select Create Dynamic Panel in the context menu.

    Note

    Dynamic panels are the only widgets with drag events, so any elements that you want to be draggable must be placed inside a dynamic panel.

2. Move the Dynamic Panel with its Dragged Event

  1. Select the dynamic panel and click New Interaction in the Interactions pane.

  2. Select the Dragged event in the list that appears, and then select the Move action.

  3. Select This Widget in the Target dropdown.

  4. In the Move dropdown, select With Drag x. This will make the dynamic panel follow the cursor along the X (horizontal) axis as you drag it in the web browser.

  5. Do not close the action yet.

3. Add Boundaries to the Move Action

Note

You can learn the specifics of how movement boundaries work here: Move Action Boundaries.

  1. Click More Options at the bottom of the Move action.

  2. Under Bounds, click Add boundary.

The Left Boundary

  1. In the new boundary row that appears, select left in the first dropdown. (This refers to the X value of the dynamic panel's left edge.)

  2. In the middle dropdown, select is greater than or equals.

  3. Click the fx icon to the right of the third field to open the Edit Value dialog.

  4. At the bottom of the dialog, click Add Local Variable.

  5. In the first field of the new local variable row, name the variable LineWidget. In the second field, select widget. In the third, select the line widget. (This local variable refers to the line widget as a whole.)

  6. In the upper field of the dialog, enter: [[LineWidget.left]] (This bracketed expression refers to the X value of the line widget's left edge.)

  7. Click OK to close the Edit Value dialog.

The boundary we've just created, left — is greater than or equals — [[LineWidget.left]], means that the dynamic panel's left edge can only move to X values that are greater than or equal to the X value of the line widget's left edge. In other words, it cannot move any farther left on the page than the line widget's left edge.

The Right Boundary

  1. Click Add boundary again. In the new boundary row that appears, select right in the first dropdown. (This refers to the X value of the dynamic panel's right edge.)

  2. In the middle dropdown, select is less than or equals.

  3. Click the fx icon to the right of the third field to open the Edit Value dialog.

  4. At the bottom of the dialog, click Add Local Variable.

  5. In the first field of the new local variable row, name the variable LineWidget. In the second field, select widget. In the third, select the line widget. (This local variable refers to the line widget as a whole.)

  6. In the upper field of the dialog, enter: [[LineWidget.right]] (This bracketed expression refers to the X value of the line widget's right edge.)

  7. Click OK to close the Edit Value dialog.

The boundary we've just created, right — is less than or equals — [[LineWidget.right]], means that the dynamic panel's right edge can only move to X values that are less than or equal to the X value of the line widget's right edge. In other words, it cannot move any farther right on the page than the line widget's right edge.

4. Preview the Interaction

Preview the page and drag the circle left and right. It should now move only along the path defined by the line widget, and you should not be able to drag it beyond the line widget's left and right edges.

Additional Information and Tips

Vertical Slider

To build a vertical slider, follow the steps above and make the following changes:

  • Use a vertical line instead of a horizontal line.

  • In the Move action's Move dropdown, select With Drag y. This will make the dynamic panel follow the cursor along the Y (vertical) axis as you drag it in the web browser.

  • For the Move action boundaries, use:

    • top — is greater than or equals — [[LineWidget.top]]
    • bottom — is less than or equals — [[LineWidget.bottom]]

← Set Dynamic Panel State on Next PageTerms and Conditions →