7 Replies Latest reply on Apr 7, 2011 1:41 PM by OpherAloni

    Multiple Thumb Slider with Multiple Track Colors

    BhaskerChari Level 4

      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.

       

       

      multiple_thumb_slider.JPG

       

      Thanks,

      Bhasker

        • 1. Re: Multiple Thumb Slider with Multiple Track Colors
          BhaskerChari Level 4

          Has any one ever got this kind of a requirement..and has implemented it ??

          • 2. Re: Multiple Thumb Slider with Multiple Track Colors
            BhaskerChari Level 4

            Has any one got any insight or any idea in this kind of a Slider component..Any ideas would be greatly appreciated..??

             

            May be I am expecting any response from the Adobe team ..

             

            Thanks,

            Bhasker

            • 3. Re: Multiple Thumb Slider with Multiple Track Colors
              BhaskerChari Level 4

              Hi Guys,

               

              I have implemented my own component in combination with the built in Slider component. It looks like below:

               

              Slider.png

               

              Thanks,

              Bhasker

              • 4. Re: Multiple Thumb Slider with Multiple Track Colors
                Arun Ganesh Level 3

                Hi Bhasker,

                     Can you share your code please?

                 

                Thanks in Advance,

                 

                With Regards,

                Arun P. Ganesh

                • 5. Re: Multiple Thumb Slider with Multiple Track Colors
                  Valdir Mendes

                  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.

                   

                  slider.png

                   

                  <?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>
                  

                  1 person found this helpful
                  • 6. Re: Multiple Thumb Slider with Multiple Track Colors
                    BhaskerChari Level 4

                    Hi Valdir Mendes,

                     

                    Though your idea is not exactly matching my requirement but it is however helpful and I have already solved it myself. You need to make some more changes to the code you posted as in your one you cannot see the color changing along with the thumb as you move but it will update only when you release or click on the track.

                     

                    Thanks,

                    Bhasker

                    • 7. Re: Multiple Thumb Slider with Multiple Track Colors
                      OpherAloni

                      Hi Bhasker,

                       

                      I'm working on a project which requires a component just like this.

                       

                      Would you be willing to share your code?

                       

                      Thanks,

                      Opher