Draggable Slider Glitch: update slider position and drag

[Stevan]

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

[OSUblake]

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)
  }
});