Andrew Trice

Tuesday August 08, 2006

Customizing Slider Components

Recently, a coworker asked me if it was possible to resize the thumb on a slider on a mx:HSlider or mx:VSlider control. I have never had the necessity to do this, so I really had no idea if it could be done. After a little perusal of the Flex 2 API documentation... turns out that it can be done, and its pretty easy.

First thing you need to do is create a class that extends the mx.controls.sliderClasses.SliderThumb class. In the constructor, set the desired size. In my example, I just made it 25x25 pixels. When you instantiate the Slider, implement the sliderThumbClass attribute with a reference to your extended SliderThumb class. For example

<mx:HSlider sliderThumbClass="components.LargeSliderThumb"  />

By assigning the sliderThumbClass, the slider thumb is resized and the desired effect has been achieved.

I also decided to play with skinning the slider, just for fun. Don't tell me my icons are pixelated b/c already know. :) I used the thumbUpSkin, thubOverSkin and thumbDownSkin style attributes of the mx:HSlider element to use png images instead instead of the default skin. This shows how the different skins are rendered with the different sizes.



View Source
Download Source