Trackless Slider component

The Slider component is fairly easy to style. But as with many of the flex components, I seem to quickly reach the point where I can’t get it to look exactly as I want it to. Rumours say that this will be rectified in version four, but in the meantime there are workarounds and hacks.

I wanted a Slider component with a background of bars growing in height – like a volume slider. Attaching a png with the bars was easy (yes, I know – it can be scaled. But for this project, scaling was not necessary and I couldn’t justify spending hours on gold-plating it). Removing the tracks wasn’t that easy as it can’t be done through a simple style property.

The solution is a custom skin. But as the Slider component uses the track to calculate some of its properties, and places other graphics according to track size and position, it needs to be measurable. I just drew an invisible rectangle. Overriding the methods that calculate width and height will probably be more efficient, but shouldn’t matter, unless you have dozens on screen simultaneously.

Here’s the skin class – use mySlider.setStyle(“trackSkin”, SliderTrackSkinInvisible) to set it.

package no.papirfly.msp.skins
    import flash.display.Graphics;

    import mx.core.IFlexDisplayObject;
    import mx.skins.halo.SliderTrackSkin;

    public class SliderTrackSkinInvisible extends SliderTrackSkin implements IFlexDisplayObject

        public function SliderTrackSkinInvisible()

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            var gr:Graphics = this.graphics;
            gr.beginFill(0x00FF00, 0);
            gr.drawRect(0,0, unscaledWidth, height);

2 Responses to “Trackless Slider component”

  1. February 17, 2009 at 1:49 am

    cheers for this, came in handy.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: