Custom Slider Showing values on thumb

Hi all,

Just check out my Custom slider for flex with the valus shown on and above the thumb.

I have a Custom Slider in which the create children method has been overriden to add a label and its x and y positions are set.A listner for Mouse button up has been written to update the value of the label.Once the top label value is updated a custom event called ThumbUpdateEvent is triggered to notify the change in the value.

I have a slider thumb skin in which a uitextfield is used to display the value  inside the thumb.The uitextfield is set when the ThumbUpdateEvent is dispatched.

CustomSlider.as

package com
{
import flash.events.MouseEvent;

import mx.controls.Label;
import mx.controls.sliderClasses.Slider;
import mx.controls.sliderClasses.SliderThumb;
import mx.core.mx_internal;

use namespace mx_internal;

public class CustomSlider extends SliderThumb
{
public var lab:Label;
public var ob:Array;
public var num:int;
public var index:int;
public function CustomSlider()
{
super();
this.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
this.width=20;
this.setStyle(“fontSize”,12);
this.setStyle(“Color”,”red”);

}
private function onMouseUp(evt:MouseEvent):void{
ob=Slider(owner).values;
num=ob[thumbIndex]
this.index=thumbIndex;
lab.text=num.toString();
//this.label=num.toString();
this.dispatchEvent(new ThumbUpdateEvent(ThumbUpdateEvent.Updated,num,true));
//Alert.show(ob.toString());
}
override protected function createChildren():void
{
if(!lab)
{
lab=new Label();
lab.x=-10;
lab.y=-20;
lab.width=100;
lab.height=100;
lab.setStyle(“color”,”blue”);
this.addChild(lab);
}
}

}
}

ThumbUpdateEvent.as

package com
{
import flash.events.Event;

public class ThumbUpdateEvent extends Event
{
public static var Updated:String=”Updated”;
public var ThumbVal:int;
public function ThumbUpdateEvent(type:String,Value:int, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
this.ThumbVal=Value;
}

}
}

DownloadSource