<?xml version="1.0"?>
  <!-- Simple example to demonstrate the VSlider control. -->
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  
      <mx:Script>
          <![CDATA[
     
            private var imageWidth:Number=0;
            private var imageHeight:Number=0;
            
            // Event handler function to change the image size.
            private function changeSize():void
                {
                   phoneImage.width=uint(imageWidth*hSlider.value/100);
                   phoneImage.height=uint(imageHeight*hSlider.value/100);
                }
          ]]>
      </mx:Script>
  
          <mx:Panel id="panel" title="VSlider Control Example" 
              height="100%" width="100%" 
              layout="horizontal"
              paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
          
              <mx:HBox width="50%">
                  <mx:Image id="phoneImage" source="@Embed('explorer-controls-assets-Nokia_6630.png')" 
                      creationComplete="imageWidth=phoneImage.width; imageHeight=phoneImage.height;" />
              </mx:HBox>
  
              <mx:VBox horizontalAlign="center">
                  <mx:Label color="blue" text="Drag the slider to resize the image."/>
      
                  <mx:VSlider id="hSlider" 
                      dataTipPlacement="top" 
                      minimum="0" maximum="100" value="100" 
                      tickColor="black" 
                      snapInterval="1" tickInterval="10" 
                      labels="['0%','100%']" 
                      allowTrackClick="true" 
                      liveDragging="true" 
                      change="changeSize();"/>
              </mx:VBox>
              
          </mx:Panel>
  </mx:Application>