Jump to content
GreenSock

rdgAtl

Non jQuery powered timeline slider

Recommended Posts

Greetings,

I have a rich media banner project and I need to incorporate a timeline slider for one particular section. Can someone please point me to a code Pen that shows the creation and use of a slider using ONLY GSAP (tweenMax, Draggable,, etc.) I have found many examples but they all seem to use the jQuery Slider plugin. DoubleClick does not allow jQuery and personally, I want to learn how to do this without it anyway. Thank you.

Link to comment
Share on other sites

Just what I was looking for! Thank you Diaco!

Link to comment
Share on other sites

Just a slight modification to Diaco's ridiculously simple slider. I set the rail as the trigger so you can click anywhere to set the knob's position.

 

See the Pen OyOayw?editors=001 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

Just a slight modification to Diaco's ridiculously simple slider. I set the rail as the trigger so you can click anywhere to set the knob's position.

 

See the Pen OyOayw?editors=001 by osublake (@osublake) on CodePen

 

I noticed a minor bug with this slider. As soon as you click, the timeline advances slightly then you can't return to 0 or the end.

Link to comment
Share on other sites

Not really a bug. Diaco was using the wrong width, but it looks like he fixed the problem and updated his pen. It was easy to overlook because of the transforms set on the handle.

 

To prevent problems like that, I always wrap the handle in an a div positioned absolute with no size, and use that as the draggable. The handle on most sliders extend past the actual bounds of the track, usually halfway past the edge. By using a wrapper around the handle, you can position it anywhere you want without worrying about the bounds or calculating offsets. I updated my pen using that technique and lowered the opacity so you can see the track behind it. I'll try to post a material design slider I made later. It's a little more complicated, but has some cool features.

 

See the Pen OyOayw?editors=011 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×