Interactive slider with Hype

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

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 (121.6 KB)


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

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

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?

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


Thank You!

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

1 Like