Sliders on Responsive Animation

[gthroop]

Here I go again with sliders on a responsive animation. I cannot get this slider to stay with the drag to save my life. Any help would be greatly appreciated.
http://www.kf-interactives.com/clabsi-cleaningSlider/
I put a keyframe at each green tick on the timeline. Didn’t work. I wanted it to “slot” into the green tick so I added two keyframes two spaces before and after the keyframe at the green tick. Now it really doesn’t work.
All transitions are set to Linear and the Speed is at 300%. I’ve tried many different settings on the Speed, 400% worked pretty well when it was two keyframes at the beginning and end, but now, can’t find the sweet spot since the transition lengths are different.
Any help is appreciated, I can send file as well. Thanks!

[TKDblackbelt (Ken Heins)]

I am definitely not an expert in sliders, but I am sure someone is. I am sure you will need to send file copy,

I dont see whats wrong with it, but I am not the designer

[JimScott]

This drag issue is a well known problem with responsive set-ups in Hype. Why not change your approach?

I see no value in the drag interface for your project. You could simply have an animated click-based timeline (Step One, Two, etc.) that creates a more effective interface.

[gthroop]

Update: I just made it a straight timeline dragger, one keyframe at the front, one at the end. I would love a solution to this though, it would be so much nicer to have the slider slot into the Steps.
@JimScott, alas I have no choice in this, I try to discourage the sliders every time suggested the same thing, click based timeline, nope, they want it to drag…

[JimScott]

@gthroop

alas I have no choice in this

Rats!

Here is a thread that goes over this issue pretty thoroughly. You may find something useful here:

Drag control problems + workaround

Hi, I think the drag control is a bit tricky…let’s figure out if is possible to improve it! (hope is in the right category, if not move it please) SPACE/TIME RATIO the ratio between the mouse position and the slider position seems to be fixed, something like 100px/1s, this is fine when you understand how does it works: if I’ve to move my slider for 500px, so I’ve to move it in a time window of 5 seconds, so it follows the mouse position. …but, if you scale the element you loose comp…

[JimScott]

Another go around - courtesy of @rene to which I have made some minor adjustments (runs a timeline).
I think this is an elegant solution in general - not sure if it will apply to your precise circumstances.
Unlike so many attempts for a fix to this issue, the Javascript is minimal.

Rene's original thread:

Drag Constrain template

There are already a few examples in this forum for drag constrainment. But these do not work when you’re document has to support scalability. That’s why I started to work on a template that does support this and uses only the build-in javascript API’s. This template has three examples: constrain a draggable in a box, horizontal- and vertical-constrainment. drag-constrain.hypetemplate.zip (48.2 KB)

My Demo here. Resize the window - this is a timeline drag - pretty clean!

My Demo Hype project: Drag_Sync.hype.zip (17.5 KB)