Jump to content
GreenSock

Stevan

Draggable Slider Glitch: update slider position and drag

Recommended Posts

Hello humans,

I am building a range input Vue component, like so many before me. Nothing fancy, but it should behave perfectly. It has to:

  1. be draggable ️,
  2. react on up-right/down-left (not in demo) ️,
  3. gracefully snap to mouse position when mousedown on the slider 'path' ️ and continue dragging ️,
  4. and also gracefully snap to mouse position on click on the slider 'path' (or rather to the nearest snap point) ️.

But it:

  1. Jumps all over the path when mousedown--move a bit--mouse stop (and similar combinations of movement).
  2. Overshoots, or stops moving on mouseup without reaching the mouse.

About the code:

I omitted a lot of updating the styles on drag and such, but I did leave a couple of examples how I would go about it, i.e. using gsap.getProperty(slider.target, ...) so you can tell me if it should be done differently. I am accessing the slider target via slider.target because this is logging as udefined in my Vue SFC with <script setup> sugar. Any ideas about that?

Another question is regarding updating Draggable. I sprinkled a couple of onComplete: slider.update to try and keep everything in sync, but I didn't achieve much. Or did I?

How to unglitch it? Help me understand.

Stevan

See the Pen oNpbxzW by stevaner (@stevaner) on CodePen

Link to comment
Share on other sites

Welcome to the forums @Stevan

 

This thread has some demos in that show how to do the snapping. Basically adding an event listener and then calling Draggable's startDrag method.

 

someElement.addEventListener("pointerdown", e => myDraggable.startDrag(e, true));

 

 

As for stuff being undefined, Draggable.create() returns an array, so you would need to return the draggable from the array like so.

 

return Draggable.create(...)[0];

 

Or you can use the constructor if you are only creating a single instance.

return new Draggable(...);

 

You can also get the target in your Draggable callbacks if you use a regular function instead of an arrow function.

new Draggable(dragThumb, {
  onPress() {
    console.log("target", this.target)
  }
});

 

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