trych Posted December 14, 2021 Share Posted December 14, 2021 Hi there! I am trying to create a slider that shows a number, depending on its position (like an input range with a number directly on the thumb) using the Draggable plugin. I have defined a bounds object to keep the slider within these bounds. However, since the thumb's size increases during dragging, the thumb does not stay within the bounds all the time. Draggable allows the thumb to move into a position that would have kept it in its original bounds (not its updated bounds). The issue becomes apparent if you try to drag the slider from 1 to 100 in one go. Notice also, when you arrive at 100 and then let go, the slider snaps into the correct position. How can I change my setup to make sure that the slider stays within the bounds at all times? Thanks! See the Pen wvrgegQ?editors=1111 by trych (@trych) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted December 14, 2021 Solution Share Posted December 14, 2021 Hello @trych, I'm not super hot on Draggable, but I checked the docs and there's an update method.https://greensock.com/docs/v3/Plugins/Draggable/update() Thumb is an array which I wasn't expecting so I've had to get the first instance with thumb[0] - maybe there's a better way of getting that. But it seems to be working! See the Pen oNGBoWe?editors=0011 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
trych Posted December 14, 2021 Author Share Posted December 14, 2021 Oh wow, such a simple fix. Thanks a lot, works really well. Also, I noticed, when the Draggable instance is create via `new Draggable()` instead of `Draggable.create()`, you do not get an array, so I just used this instead now. Thanks again! 1 Link to comment Share on other sites More sharing options...
OSUblake Posted December 14, 2021 Share Posted December 14, 2021 3 hours ago, Cassie said: Thumb is an array which I wasn't expecting so I've had to get the first instance with thumb[0] When I'm creating a single Draggable, I like to use new instead of create. That will return the instance instead of an array. const thumb = new Draggable(".thumb", { ... }) But you really don't need that in this case. Just use this. this.update( {applyBounds:true} ) 2 Link to comment Share on other sites More sharing options...
trych Posted December 14, 2021 Author Share Posted December 14, 2021 1 hour ago, OSUblake said: Just use this. Good point. Will keep this in mind. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now