Interactive slider with Hype

1

Is it possible to build an interactive slider inside hype? Have a look at this example (scroll down to the bottom of the page where you can see a map with a slider above it)

I can build a similar slider with Articulate Storyline but have no idea how to do it in Hype. How would I connect each slider state with a timeline action?

Thanks for help
Greg

2

yes, without javascript

Only one limitation, the current version of Hype does not support a drag action properly in a responsive layout.
Also in your example the slider is fixed and you can do the same in Hype. The slider must be set under 320px, ( iPhone 4/5 portrait)

check the example

drag_action.png911×568 170 KB

drag_action.hype.zip (121.6 KB)

5 Likes
3

WOW!!! Thanks a lot. I will have a look and will be in touch if I have any problems with doing this myself.

4

@grzesiek.rogala in Hype you can do many things using the timeline, Test yourself.

5

I think I got it. So basically you animate all the objects on the timeline and then assign the ‘on drag’ action to the slider and make it control the timeline. Is that right?

6

Yes this is very simple in Hype :slight_smile:

Try this template, in this case with the drag action on the right panel you can change page

2 Likes
7

Thank You!

8

Fantastic! Adding a slider to my pages now! Thank you so much!

1 Like