Three.js动画控件

Question

i have blender animation imported to three.js. I want control the animation using vertical slider bar "id=#roof_angle". So if i drag my slider up/down the animation go forward/backward. All works fine on the first run.I can go up and down. If i play a bit longer my animation start to miss my bar position. How to fix this? What do i miss? Animation has 90 frames and my bar height is 504px.

My code

function onDocumentMouseDownY( event ) {
   document.addEventListener( 'mousemove', onDocumentMouseMoveY, false );
   last_positionY = event.clientY; 
}
function onDocumentMouseMoveY( event ) {
    delta_mouseY = last_positionY - event.clientY;
    roofAngle = $( "#roof_angle" ).slider( "option", "value")
if(delta_mouseY >= 1){
   if(roofAngle >= 0 && roofAngle < 90 ){
      roofAngle ++;
      animation.update(1/24*(90/504)*delta_mouseY);
   }
}
   else{            
   if(roofAngle > 0){
    animation.update(1/24*(90/504)*delta_mouseY);
    roofAngle --;
   }
   }
  last_positionY = event.clientY;

}

Answer 1

So, i solve my problem with nasty way adding some conditions to "animation.currentTime", where my animation length is 3.75. But it doesn't answer why my animation delta time float.

function onDocumentMouseMoveY( event ) {
        delta_mouseY = last_positionY - event.clientY;
        roofAngle = $( "#roof_angle" ).slider( "option", "value")
        timeFrameDelta = 1/24*(90/504)*delta_mouseY;


        if(delta_mouseY >= 1){
            if(roofAngle >= 0 && roofAngle < 90 && animation.currentTime+timeFrameDelta < 3.75){
                roofAngle ++;
                animation.update(timeFrameDelta);
            }
        }
        if(delta_mouseY < 0){
            if (animation.currentTime < 0){
                animation.currentTime = 0;
            }
            if(roofAngle > 0){
                animation.update(timeFrameDelta);
                roofAngle --;
            }
        }

        last_positionY = event.clientY;
  }

If, some one know better way pleas give me some tips.