         
         if (RtempValue != value)
         {
-            setValue(RtempValue);
-            dispatchEvent(new Event("change"));
+            var slideDuration:Number = getStyle("slideDuration");
+            if (slideDuration != 0)
+            {
+                if (!animator)
+                {
+                    animator = new Animation();
+                    var animTarget:AnimationTarget = new AnimationTarget(animationUpdateHandler);
+                    animTarget.endFunction = animationEndHandler;
+                    animator.animationTarget = animTarget;                    
+                    // TODO (chaase): hard-coding easer for now - how to style it?
+                    animator.easer = new Sine(0);
+                }
+                animator.stop();
+                animator.duration = slideDuration * 
+                    (Math.abs(value - RtempValue) / (maximum - minimum));
+                animator.motionPaths = [
+                    new SimpleMotionPath("value", value, RtempValue)];
+                animator.play();
+            }
+            else
+            {
+                setValue(RtempValue);
+                dispatchEvent(new Event("change"));
+            }
         }
 
         event.updateAfterEvent();
     }
+    
+    /**
+     * @private
+     * Handles events from the Animation that runs the animated slide.
+     * We just call setValue() with the current animated value
+     */
+    private function animationUpdateHandler(animation:Animation):void
+    {
+        setValue(animation.currentValue["value"]);
+    }
+    
+    /**
+     * @private
+     * Handles end event from the Animation that runs the animated slide.
+     * We dispatch the "change" event at this time, after the animation
+     * is done.
+     */
+    private function animationEndHandler(animation:Animation):void
+    {
+        dispatchEvent(new Event("change"));
+    }
 }
-
 }

     */
    override protected function system_mouseMoveHandler(event:MouseEvent):void
    {
        currValue = calculateNewValue(currValue, event);

        positionThumb(valueToPosition(currValue));

import mx.core.IDataRenderer;
import mx.core.IFactory;
import mx.core.UIComponent;
import mx.events.EffectEvent;
import mx.formatters.NumberFormatter;
import mx.managers.IFocusManagerComponent;

import spark.effects.SimpleMotionPath;
import spark.effects.animation.Animation;
import spark.effects.easing.IEaser;
import spark.effects.easing.Sine;

include "../../styles/metadata/BasicTextLayoutFormatStyles.as"

