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
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
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
posted by Andrew Trice at 8/07/2006 09:46:00 PM
3 Comments:
This is a really great component with a simple solution. However, I've got a custom slider that I'm trying to dynamically change the width. So instead of a static value, it looks something like:
this.width=sliderWidth;
I'm having issues updating the value since it extends the SliderThumb class. I can get a setter function to update the value, but the value doesn't update the width (i.e. the slider does not change). Any thoughts?
Is it possible to skin DataTip of both HSlider and Vslider with different skin files?
dataTip of HSlider and VSlider should look differently
Thanks for this post! Saved me a lot of time.
Post a Comment
<< Home