Flex Vslider skinning problem

Question

Hello.
I am using a VSlider in my flex application for the purpose of volume control in video-display.

I set an image as trackskin of vslider. This vslider is contained in a VBox with some background image.

The problem is the trackskin image is widened to some wierd width even though the original trackskin image is slim. It actually takes the width of parent VBox. I tried to set width of vslider itself but in vain.

Please help me out- how can I use the original width of the image.

Some code: [Embed(source = "assets/images/step.jpg")]
[Bindable]
public var imgClass:Class;

<mx:VBox height="146" width="31"
horizontalAlign="center"
verticalAlign="middle"
backgroundImage="assets/images/volume_control.png">

    <mx:VSlider height = "100" 
        showTrackHighlight="true" 
        id="position" 
        trackSkin="{imgClass}" 
        />

</mx:VBox>