Customizing the track highlight skin on an MX HSlider control in Flex 4

The following example shows how you can customize the track highlight skin on a Halo/MX HSlider control in Flex 4 by setting the showTrackHighlight and trackHighlightSkin styles.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/ -->
<s:Application name="Halo_HSlider_trackHighlightSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:CheckBox id="chckBx"
                label="showTrackHighlight"
                selected="true" />
    </s:controlBarContent>
 
    <mx:HSlider id="sldr"
            showTrackHighlight="{chckBx.selected}"
            trackHighlightSkin="skins.CustomSliderTrackHighlightSkin"
            value="7"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom track highlight skin, skins/CustomSliderTrackHighlightSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/ -->
<s:Skin name="CustomSliderTrackHighlightSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        height="11" width="200"
        disabledAlpha="0.5">
 
    <s:Rect left="0" right="0" top="2" height="4">
        <s:fill>
            <s:SolidColor color="red" alpha="0.35" />
        </s:fill>
    </s:Rect>
 
</s:Skin>

[HaloSparkSkins]

[GoogleAdsWide]

View source is enabled in the following example.

You can also set the showTrackHighlight and trackHighlightSkin styles in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/ -->
<s:Application name="Halo_HSlider_trackHighlightSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|HSlider {
            showTrackHighlight: true;
            trackHighlightSkin: ClassReference("skins.CustomSliderTrackHighlightSkin");
        }
    </fx:Style>
 
    <mx:HSlider id="sldr"
            value="7"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or you can also set the showTrackHighlight and trackHighlightSkin styles using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/ -->
<s:Application name="Halo_HSlider_trackHighlightSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Set track highlight skin"
                click="btn_click(event);" />
        <s:CheckBox id="chckBx"
                label="showTrackHighlight"
                selected="true"
                change="chckBx_change(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import skins.*;
 
            protected function btn_click(evt:MouseEvent):void {
                sldr.setStyle("showTrackHighlight", chckBx.selected);
                sldr.setStyle("trackHighlightSkin", CustomSliderTrackHighlightSkin);
            }
 
            protected function chckBx_change(evt:Event):void {
                sldr.setStyle("showTrackHighlight", chckBx.selected);
            }
        ]]>
    </fx:Script>
 
    <mx:HSlider id="sldr"
            value="7"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or, if you wanted something a bit more original, you could apply a repeating BitmapFill on the CustomSliderTrackHighlightSkin instead of a solid color, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/ -->
<s:Skin name="CustomSliderTrackHighlightSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        height="11" width="200"
        disabledAlpha="0.5">
 
    <s:Rect left="0" right="0" top="2" height="4">
        <s:fill>
            <s:BitmapFill source="@Embed('pattern_149.gif')" fillMode="repeat" />
        </s:fill>
    </s:Rect>
 
</s:Skin>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

One thought on “Customizing the track highlight skin on an MX HSlider control in Flex 4

  1. Hi,

    Your site is AWESOME thanks for all your hard work!. Now i have a question, how you knows Flex 4 Slider doesn’t have now the “labes” functionality like Flex 3, so do you have an example of how add a labels in HSlider in flex 4.

    Thanks for all!

Comments are closed.