10 Replies Latest reply on Jan 12, 2010 9:58 PM by WebTrauma

    change the color/skin of slider Thumb

    Flex-urgent
      Thanks guys for all your previous help..

      I want to change the color of the thumb of the slider but not able to do it. can anybosy help me out
        • 1. Re: change the color/skin of slider Thumb
          matthew horn Level 3
          You can use the fillColors style property which takes an array:

          HSlider {
          fillColors: #ff0000, #ff3300, #ffff00, #ff0033;
          }

          BTW, the style explorer is helpful in finding style properties:
          http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html#

          hth,
          matt horn
          flex docs
          • 2. Re: change the color/skin of slider Thumb
            Flex-urgent Level 1
            i have already checked the links that you gave.. it doesnt give example of changing the slider thumb color. i want to set the color of the slider thumb to dark blue.. i am not sure how to set fill color style to slider thumb
            • 3. Re: change the color/skin of slider Thumb
              matthew horn Level 3
              Which version of Flex are you using?

              Note that the colors I provided are random. In Flex 3, the following set of colors will turn the thumb blue:


              HSlider {
              fillColors: #0000cc, #0000cc, #0000cc, #0000cc;
              }

              You have to put this in a style block, and it assumes you are using an HSlider.

              matt horn
              flex docs
              • 4. Re: change the color/skin of slider Thumb
                Flex-urgent Level 1
                thanks that worked.. but just for my knowledge, why have we to define 4 times the same color.. what do they represnt for ?
                • 5. Re: change the color/skin of slider Thumb
                  matthew horn Level 3
                  The thumb actually has a fill which uses an array of colors to define different areas of that fill. When the thumb is rendered on the screen, a gradient is drawn from one color to the next.

                  matt horn
                  flex docs
                  • 6. Re: change the color/skin of slider Thumb
                    WebTrauma Level 1

                    Hi Matt,

                     

                    I have a similar requirement, except:

                     

                    1. There are multiple thumbs, each of a different color

                     

                    2. The colors need to be dynamically adjustable from a colorPicker control

                     

                     

                    This is for an mx hslider running in a Spark (Flex 4) app.

                     

                    I tried dynamically setting a sliderThumb color by extending the sliderThumb class with a color attribute. It works when I change the color by clicking a button, but not when I try setting the color in Actionscript when the component initially loads...I am probably calling the changeColor() function from the wrong event...which event should I use to change a sliderThumb style upon initial load?

                     

                     

                    Thanks!!!

                    • 7. Re: change the color/skin of slider Thumb
                      Peter deHaan Level 4

                      I'd try setting it from the creationComplete event handler.

                      For a similar example, see http://blog.flexexamples.com/2010/01/07/styling-individual-thumbs-in-the-mx-hslider-contro l-in-flex/

                       

                      Peter

                      • 8. Re: change the color/skin of slider Thumb
                        WebTrauma Level 1

                        I tried using exactly the same code as in your example, but it doesn't work...the color of the slider button does not change.

                         

                        http://blog.flexexamples.com/2010/01/07/styling-individual-thumbs-in-the-mx-hslider-contro l-in-flex/

                         

                        It is a round slider instead of the classic Halo pointy rectangle (the pointy rectangle would actually be better). Am I picking up a Spark style on my Halo component?

                        • 9. Re: change the color/skin of slider Thumb
                          Peter deHaan Level 4

                          This more or less works for me in a really recent version of the beta Flex 4 SDK:

                           

                          <?xml version="1.0" encoding="utf-8"?> 
                          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                         xmlns:s="library://ns.adobe.com/flex/spark" 
                                         xmlns:mx="library://ns.adobe.com/flex/mx"> 
                              
                              <fx:Script>
                                  <![CDATA[
                                      private function init():void {
                                          sldr.getThumbAt(0).setStyle('chromeColor', 'red');
                                          sldr.getThumbAt(0).setStyle('fillColors', ['red', 'red']);
                                          
                                          sldr.getThumbAt(1).setStyle('chromeColor', 'haloGreen');
                                          sldr.getThumbAt(1).setStyle('fillColors', ['haloGreen', 'haloGreen']);
                                      }
                                  ]]>
                              </fx:Script>
                              
                              <mx:HSlider id="sldr" 
                                          minimum="0" maximum="15" 
                                          thumbCount="2" 
                                          values="[4,9]"
                                          creationComplete="init();"
                                          horizontalCenter="0" verticalCenter="0" />
                              
                          </s:Application>
                           
                          

                           

                          Peter

                          • 10. Re: change the color/skin of slider Thumb
                            WebTrauma Level 1

                            Thank you for the very helpful code snippet !!!

                             

                            This works for me too. However, I also have a requirement to dynamically add/remove sliderThumbs. When I do this, it does not pick up the setStyles. Also, I get a null object reference when I try to set the Style of a newly created thumb, although it lets me set the value (un-comment the two lines below to get the null object reference).

                             

                            [Bindable]
                             private var zThumbCount:Number=2;
                            
                            private function init():void
                            {
                                
                                 sldr.thumbCount=3;
                                 sldr.values= [20,40,70];
                                            
                                 sldr.getThumbAt(0).setStyle('chromeColor', '0x00EE00');
                                 sldr.getThumbAt(0).setStyle('fillColors', ['0x00EE00','0x00EE00' ]);
                                            
                                 sldr.getThumbAt(1).setStyle('chromeColor', '0xCCEE00');
                                 sldr.getThumbAt(1).setStyle('fillColors', ['0xCCEE00', '0xCCEE00']);
                                            
                                 //sldr.getThumbAt(2).setStyle('chromeColor', '0x0000CC');
                                 //sldr.getThumbAt(2).setStyle('fillColors', ['0x0000CC', '0x0000CC']);
                            }
                            
                            <mx:HSlider id="sldr" width="400"
                                 minimum="0" 
                                 maximum="90" 
                                 allowThumbOverlap="false"
                                 thumbCount="{zThumbCount}"
                                 values="{speedThumbs}"
                                 creationComplete="init();"
                                 x="30" y="430"/>