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)

Resizable table column using widget
#6

Thanks Joseph. That works perfectly.

#7

Hi,
I tried to reproduce this for an horizontal timeline but can’t make it work.
Here is my filehorizontal timeline.rp (59.3 KB)

Can you please have a look at it?

THX

#8

Hey there @Patok. The issue is you have the onDrag event on the timeline itself instead of the ends. So you can drag the entire group by draging the timeline, but there are no onDrag events on your end objects.

image

Did you want the left or right end to be fixed? Or do you want both ends to be movable?