Flex Examples

Well, the title of the post pretty much says it all, but I just noticed this today. It seems that you can highlight the HSlider/VSlider track by setting the showTrackHighlight style to true. I made this really quick mini-app which lets you toggle the style on and off, as well as see the behavior of 1 slider thumb versus 2 slider thumbs.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/21/highlighting-a-slider-controls-track-using-the-showtrackhighlight-style/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:HSlider id="slider"
            thumbCount="{numericStepper.value}"
            tickInterval="1"
            showTrackHighlight="{checkBox.selected}" />

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="thumbCount:" />
        <mx:NumericStepper id="numericStepper"
                minimum="1"
                maximum="2" />

        <mx:Spacer width="100%" />

        <mx:CheckBox id="checkBox"
                label="showTrackHighlight"
                selected="true" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

To change the track highlight color, you can set the HSlider or VSlider control’s themeColor style. For example, to change the HSlider control’s theme color in the previous example to “haloOrange”, you would use the following code:

    <mx:HSlider id="slider"
            thumbCount="{numericStepper.value}"
            tickInterval="1"
            showTrackHighlight="{checkBox.selected}"
            themeColor="haloOrange" />

Happy Flexing!