Jump to content

Gary Griswold

Draggable bounds

Moderator Tag

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

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 comment
Share on other sites

Thanks Diaco.  You really nailed it.

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.