Control number count with a slider or on drag action

(John) #1

This one is pretty straight forward, but is there a way to control a number counter from like 1 to 500 with an on drag action, controlling a certain timeline?

I would love to provide an example, but as of now… I don’t have any.

Any help would be greatly appreciated! Thank you!


Using the


Function, you can get the exact time in milliseconds. Using: Math.round(2.5) you can round that number up or down to the nearest number.

So, you could create a 500 second timeline (8 min, 20 seconds) and write in the value of where the timeline is at. You can detect the end of a drag by using this great example project from @JimScott:
At the end of an On Drag Action can a Timeline be triggered?

Then you would ‘round’ the value retrieved back from the currentTimeInTimelineNamed function and insert that value in the innerHTML of an object.

hypeDocument.getElementById("IDofCounter").innerHTML = DragEndTime

(raph) #3

Hi there!

Here is an example you may find useful. The main logic is in these lines:

// number in a range of 1 and 30
timeval = hypeDocument.currentTimeInTimelineNamed(being_dragged);
timeval_as_percentage = timeval / 30 * 100;

// convert to number in range 1-168
hour_value = Math.round(timeval_as_percentage / 100 * 168); (354.9 KB)