Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Gary Griswold

Draggable bounds

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

Hello,

 

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);
      return(x);
    }
   function resizeText(x, min, max) {
       var size = (x - min) / (max - min) * ptRange + ptMin;
       sampleNode.style.fontSize = size + 'px';    
    }
}
 
Link to post
Share on other sites

Hi Gary Griswold  :)

 

pls try like this :

 

var D = Draggable.create(thumb,{
type : 'x' ,
bounds : slider
});

console.log('minX : '+ D[0].minX +' , maxX :'+D[0].maxX)

 

btw , pls check this pen for another way : 

See the Pen ZGLjVr by MAW (@MAW) on CodePen

  • Like 1
Link to post
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.

×