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.
<?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!
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
great examples
thanks
more flex examples: http://flexexamples.blogspot.com
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,
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
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?
I was looking for the same thing as Alejandro. Wish to inverse the highlighting. Any ideas?
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.
FYI showTrackHighlight feature been removed from spark HSlider. If you use showTrackHighlight, you are stuck with mx:HSlider.
I file a bug for the missing spark HSlider highlight related features. Please vote for the bug/feature if you like to see this implemented.
https://bugs.adobe.com/jira/browse/SDK-30066
Thanks