Custom 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.
Downloads Links:
View Source
Download Source
4:46 AM
|
Labels:
Flex Components Downloads
|
This entry was posted on 4:46 AM
and is filed under
Flex Components Downloads
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
0 comments:
Post a Comment