Jump to content
Search Community

Non jQuery powered timeline slider

rdgAtl test
Moderator Tag

Go to solution Solved by rdgAtl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.
×
×
  • Create New...