DRJO

this.dragger = Draggable.create('#progressbar__handle', { type: 'x', lockAxis: true, bounds: '#progressbar', snap: (value) => { let val = this.offsets.filter((n) => { return Math.abs(n - value) < 35 }) if (val.length) return val[0] }, overshootTolerance: 0.5 }) Cheers @OSUBlake, sharing my solution above.

Been trying a few things out with draggable, trying to simulate an <input: type=range /> component with inertia. However the problem I find when using inertia with draggable it does not respect the bounds and flies offscreen when thrown, I would assume it would ease to the bounds. Apologies if I sound lazy asking maybe a simple question but I am thought I'd use gsap for my project to save time. this.dragger = Draggable.create(this.$refs['handle'], { type: 'x', edgeResistance: 1, inertia: true, throwResistance: 5000, lockAxis: true, bounds: '#progressbar', onDrag: this.onDrag, onThrowUpdate: this.onDrag, onThrowComplete: this.onThrowComplete, onDragEnd: this.onDragEnd, allowNativeTouchScrolling: false, zIndexBoost: false, overshootTolerance: 0.5 })

How can we easily disable snapping if the nearest snap point is not within a proximity of a snap point ? I didn't create a pen because I am using members inertia plugin. Many thanks