I am building a range input Vue component, like so many before me. Nothing fancy, but it should behave perfectly. It has to:
be draggable ✅️,
react on up-right/down-left (not in demo) ✅️,
gracefully snap to mouse position when mousedown on the slider 'path' ❌️ and continue dragging ✅️,
and also gracefully snap to mouse position on click on the slider 'path' (or rather to the nearest snap point) ❌️.
But it:
Jumps all over the path when mousedown--move a bit--mouse stop (and similar combinations of movement).
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?
Draggable Slider Glitch: update slider position and drag
in GSAP
Posted
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:
But it:
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 viaslider.targetbecausethisis logging asudefinedin my Vue SFC with<script setup>sugar. Any ideas about that?Another question is regarding updating Draggable. I sprinkled a couple of
onComplete: slider.updateto 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