Draggable bounds

[Gary Griswold 4 Likes (Newbie)]

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';    

    }

}

 

[Diaco 1,948 Likes (Superhero)]

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

[Gary Griswold 4 Likes (Newbie)]

Thanks Diaco.  You really nailed it.