Flex: HSlider - Set different skins for different thumbs?

Question

I am going to use a HSlider to set a range of values. I would like the left thumb to look like ( and the right thumb to lok like ) so they appear to encompass the range like (range) instead of |range|. I only know how to set the skin for SliderThumb which will set the skin for both. Does anyone know of a way to set a different skin for each thumb?

Thanks.

UPDATE

I have this code now:

<?xml version="1.0" encoding="utf-8"?>
<mx:HSlider xmlns:mx="http://www.adobe.com/2006/mxml"&gt;

    <mx:Style>
    .thumbTickLeft
    {
     disabledSkin: Embed(source="skins.swf", symbol="thumbTickLeft_disabledSkin");
     downSkin: Embed(source="skins.swf", symbol="thumbTickLeft_downSkin");
     overSkin: Embed(source="skins.swf", symbol="thumbTickLeft_overSkin");
     upSkin: Embed(source="skins.swf", symbol="thumbTickLeft_upSkin");
    }
    .thumbTickRight
    {
     disabledSkin: Embed(source="skins.swf", symbol="thumbTickRight_disabledSkin");
     downSkin: Embed(source="skins.swf", symbol="thumbTickRight_downSkin");
     overSkin: Embed(source="skins.swf", symbol="thumbTickRight_overSkin");
     upSkin: Embed(source="skins.swf", symbol="thumbTickRight_upSkin");
    }
    </mx:Style>

    <mx:Script>
     <![CDATA[
      override protected function commitProperties():void
         {
             super.commitProperties();

           updateThumbSkins();   
         }

         private function updateThumbSkins():void
         {
          this.getThumbAt(0).setStyle('styleName','thumbTickLeft');
          this.getThumbAt(1).setStyle('styleName','thumbTickRight');
         }
     ]]>
    </mx:Script>


</mx:HSlider>

The thumb ticks just dont show at all? By the way I have made sure that the skins are loading in correctly because I can set them to a button like this:

<mx:Button styleName="thumbTickRight"/>

Answer 1

I think you could do this by subclassing the Slider class (or HSlider), and adding a method to apply skins to each thumb individually.

In Slider.as there is a method called createThumbs. If you look it up, you'll see that when a thumb is created, its skins are assigned to it based on whatever is set for thumbUpSkin, etc.

thumb = SliderThumb(new _thumbClass());

thumb.owner = this;
thumb.styleName = new StyleProxy(this, thumbStyleFilters);
thumb.thumbIndex = i;
thumb.visible = true;
thumb.enabled = enabled;

thumb.upSkinName = "thumbUpSkin";
thumb.downSkinName = "thumbDownSkin";
thumb.disabledSkinName = "thumbDisabledSkin";
thumb.overSkinName = "thumbOverSkin";
thumb.skinName = "thumbSkin";

So, you could create a method called skinThumbs and have it override the skin settings that are applied in createThumbs. You can get each thumb by calling getThumbAt(int). If you need a hand with overriding the skin settings, leave me a comment.

I would override the commitProperties method and call skinThumbs from there - just make sure you put the call the skinThumbs after the call to super.commitProperties. Incidentally, the createThumbs method is called only from commitProperties, and is only called from one location in commitProperties, so you don't have to worry about dealing with your modification being replaced by another internal call to createThumbs.

Answer 2

Well I was able to get it to work this way..not sure if this is the best way or not.

<?xml version="1.0" encoding="utf-8"?>
<mx:HSlider 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    sliderThumbClass="RangeSliderThumb" 
    creationComplete="initThumbs()">

    <mx:Script>
        <![CDATA[
            import mx.controls.sliderClasses.SliderThumb;

            [Embed(source="skins.swf", symbol="thumbTickLeft_upSkin")]
      private var leftUp:Class;

            [Embed(source="skins.swf", symbol="thumbTickRight_upSkin")]
      private var rightUp:Class;

      [Embed(source="skins.swf", symbol="thumbTickLeft_downSkin")]
      private var leftDown:Class;

            [Embed(source="skins.swf", symbol="thumbTickRight_downSkin")]
      private var rightDown:Class;

      [Embed(source="skins.swf", symbol="thumbTickLeft_overSkin")]
      private var leftOver:Class;

            [Embed(source="skins.swf", symbol="thumbTickRight_overSkin")]
      private var rightOver:Class;

      [Embed(source="skins.swf", symbol="thumbTickLeft_disabledSkin")]
      private var leftDisabled:Class;

            [Embed(source="skins.swf", symbol="thumbTickRight_disabledSkin")]
      private var rightDisabled:Class;

            private function initThumbs():void 
            {
             this.thumbCount = 2;

                var thumb1:SliderThumb = this.getThumbAt(0);
                thumb1.setStyle("thumbUpSkin", leftUp);
                thumb1.setStyle("thumbDownSkin", leftDown);
                thumb1.setStyle("thumbOverSkin", leftOver);
                thumb1.setStyle("thumbDisabledSkin", leftDisabled);

                var thumb2:SliderThumb = this.getThumbAt(1);
                thumb2.setStyle("thumbUpSkin", rightUp);
                thumb2.setStyle("thumbDownSkin", rightDown);
                thumb2.setStyle("thumbOverSkin", rightOver);
                thumb2.setStyle("thumbDisabledSkin", rightDisabled);
            }
        ]]>
    </mx:Script>

</mx:HSlider>

Answer 3

Hi guys, you may not read this again, but for the benefit of others who are having as much pain as I am trying to manipulate multiple thumbs to each have different skins, I thought I'd point out where you went wrong in your original code. I followed your original code example and also could not get the thumbs to render, then it dawned on me why your final solution worked.

The problem is that in the original code you are using style properties upSkin, downSkin, etc, whereas in the code which works you are using thumbUpSkin, thumbDownSkin, etc. Subtle change but it makes all the difference!

Hope this helps someone save a day of their lives down the track... ;-)

Cheers Drew