Jump to content
Search Community

Draggable bounds

Gary Griswold test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I have been able to use Draggable to create a very nice slider control that controls font-size.  There is one div, which is the slider bar, and another the thumb.  My only problem is that I need to set a starting X position for the thumb, that is computed from the current fontSize.  The math is working, except that I do not know how to get the this.minX and this.minY values before the slider is used.  The documentation mentions translation.transform, but I have no idea how that would be used in my javascript code.


The javascript is as follow:  If needed, I will add a code pen:



function startDraggable(fontSize, ptMin, ptMax) {

   var sampleNode = document.getElementById('sampleText');
   var ptRange = ptMax - ptMin;
   var startPos = initialPosition(fontSize);
   TweenMax.set('#thumb', {x:startPos});
    Draggable.create('#thumb', {type:'x', bounds:'#slider', onDrag:function() {
    console.log('x', this.x, this.minX, this.maxX);
        resizeText(this.x, this.minX, this.maxX);
   function initialPosition(fontSize) {
       var slider = document.getElementById('slider');
       console.log('local left', slider.offsetLeft);
      var bounds = slider.getBoundingClientRect();
      var minX = bounds.left;
      var maxX = bounds.right;
      console.log('found bounds', minX, maxX);
      var x = (fontSize - ptMin) / ptRange * (maxX - minX) + minX;
      resizeText(x, minX, maxX);
   function resizeText(x, min, max) {
       var size = (x - min) / (max - min) * ptRange + ptMin;
       sampleNode.style.fontSize = size + 'px';    
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.
  • Create New...