Adding Skins to Custom SliderThumb States in Flex 2.0

My latest project required me to skin an HSlider component that was to be used as a volume control. The skin for the slider thumb was an image of a speaker that showed sound waves according to the position on the slider track to represent the volume level (no waves representing mute, and 5 waves representing max volume). I initially tried using setStyle() to dynamically set the three corresponding states (UP, OVER, DOWN) for each position of the thumb, but noticed that there was slight performance downgrade and decided to investigate. Turns out that setStyle() is very process intensive and should be used sparingly (Flex help has a comment on that). So after some more research I realized I could just create new custom skin states to the slider thumb in a subclass to the SliderThumb class. This allowed me to use css to define each skin asset and in the custom class write the methods to handle the skin swaps.

Advertisement