Highlighting a Slider control’s track using the showTrackHighlight style

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!

8 thoughts on “Highlighting a Slider control’s track using the showTrackHighlight style

  1. Any examples with more than two thumbs? Working on a project where I dynamically add two thumbs at a time, and the track highlight only shows up between the first two.

    Cheers,

  2. Lance,

    I haven’t played much with more than 2 thumbs on a Slider control. If you think it is a bug, or want to request an enhancement request, you can report the issue in the public Flex bug base at http://bugs.adobe.com/flex/. If you can upload/attach a simple test case to the bug, it typically makes things go a lot faster.

    Also, if you wouldn’t mind posting the bug number(s) here, other people can vote on the issue and subscribe to bug notifications.

    Thanks,
    Peter

  3. Is there a way to do an inverse highlighting?
    instead of highlighting when moving from left to right, have the highlight at full and reduce it as you move the slider from left to right?

  4. I hope i am not late enough but you can always use styling for this purpose, e.g Use a whitish skin for highlight and some other coloured skin for track.

  5. FYI showTrackHighlight feature been removed from spark HSlider. If you use showTrackHighlight, you are stuck with mx:HSlider.

Comments are closed.