Drag to resize and move timeline

advanced-prototyping

#1

Hi,

I’m having a thick moment. I’m trying to drag the top and bottom circles to adjust the line in the middle. Its basically so a user can resize the length of a shift.

I also want the user to be able to drag the line on the y axis to move the line and the circles.


#2

DragTimelineY.rp (63.8 KB)

Forgot to add the example I’m working


#3

Hi!

I don’t see any circles or a vertical slider. Is this the right file?


#4

I’m having a really thick day. I’ve just uploaded to correct file.


#5

Hi!

To size the middle correctly, and to create the drag boundaries, you’ll need to use local variables. Local variables allow you to get values (such as top, bottom, width, etc.) from other widgets on the page. Here’s a post describing how to use them.

For instance, when dragging the top circle, you’ll need to know where the bottom circle is in order to properly size the line in between them.

I updated the OnMove code of both circles, and added drag boundaries.

Dragging the line itself to move the whole timeline is pretty straightforward: you use OnDrag, but instead of moving the line on drag, you move the whole dynamic panel that contains the slider.

Here is the updated file: DragTimelineY.rp (66.5 KB)


#6

Thanks Joseph. That works perfectly.