The default thumb of a HSlider component is traingular in shape and the default size is 12×12. While skinning thumb it’s usually a problem if you need to have a thumb bigger than the default. So here is a quick solution for the above problem. Write down a small custom class to handle width and height of the thumb by extending the default mx.controls.sliderClasses.SliderThumb class.
-
package customClasses {
-
import mx.controls.sliderClasses.SliderThumb;
-
import mx.core.mx_internal;
-
-
use namespace mx_internal;
-
-
public class ExtendedSliderThumb extends SliderThumb {
-
-
override protected function measure():void {
-
super.measure();
-
measuredWidth = currentSkin.measuredWidth;
-
measuredHeight = currentSkin.measuredHeight;
-
}
-
}
-
}
To get the effect of this class, you need to set the sliderThumbClass property as customClasses. ExtendedSliderThumb . Here is an example how you do it.
-
<mx:HSlider x="37.7" y="374.65" width="220" height="12"
-
tickInterval="1"
-
maximum="9"
-
minimum="1"
-
snapInterval="1"
-
tickValues="5"
-
sliderThumbClass="{controls.sliderClasses.FlexibleSliderThumb}" />