Multiple Thumb Slider with Multiple Track Colors

Question

Hi All,
Does any one implemented a Multiple Thumb Slider component with Multiple Track Colors. Please find the screen shot of the component below which I am talking about.
Any ideas or any link or sample source of code given would be highly appreciated.
If I drag any thumb the colored section between any two thumbs should increase or decrease.
Thanks,
Bhasker

Answer 1

Hi,
There is a sort of workaround I made myself. Basically you set up your slider into a canvas container and add new boxes exactly at the position between your thumb buttons, in order to imitate your 'tracks'. Look the image below and notice that the black tracks are in fact VBoxes. For different colors, make each VBox different backgroundColor style.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:Script>
          <![CDATA[
      import mx.containers.VBox;
      var tracks : Array = [];
      public function changeSliderHandler(event : Event) : void {
         for (var i : int = 0,j : int = 0; i < tracks.length; i++) {
            var track : VBox = tracks[i] as VBox;
            track.setStyle('left', slider.getThumbAt(j++).xPosition + 3);
            track.setStyle('right', slider.width - slider.getThumbAt(j++).xPosition + 3);
      public function addTrackHandler(event : Event) : void {
         var track : VBox = new VBox();
         track.setStyle('backgroundColor', '#000000');
         track.width = 0;
         track.height = 2;
         track.setStyle('bottom', '7');
         tracks.push(track);
         canvas.addChild(track);
         slider.values = slider.values.concat(0, 0);
         slider.thumbCount += 2;
          ]]>
    </mx:Script>
   <mx:Panel title="My Slider" height="95%" width="95%"
             paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
      <mx:Canvas id="canvas" borderStyle="solid" height="40" width="100%">
         <mx:HSlider id="slider" minimum="0" maximum="100" thumbCount="2"
                     change="changeSliderHandler(event)" values="{[0,0]}" showTrackHighlight="false"
                     percentWidth="100" snapInterval="1" tickInterval="1"
                     allowThumbOverlap="true" showDataTip="true" labels="{[0, 50, 100]}"/>
         <mx:VBox id="track1" backgroundColor="#000000" width="0" height="2" bottom="7" initialize="{tracks.push(track1)}"/>
      </mx:Canvas>
      <mx:Button label="Add track" click="addTrackHandler(event)"/>
   </mx:Panel>
</mx:Application>