How to get an HSlider with skins for each side of thumb

Question

I'd like to create an HSlider so that the skin of the track is different on either side of the thumb. So, for example, the track on the left side of the thumb is green, but red on the other.

Is this possible or will it take a custom component?

Answer 1

You can do this via skinning. The entire scrollbar is customizable. You just need to set the trackSkin style for the HScrollBar to be a programmatic skin. Then your skin will be basically two rectangles. 0 to parent.scrollPosition. And the other from parent.scrollPosition to height. Here's an example that might work. I haven't tested. You might need to fiddle with some numbers.

  public class ScrollBarSkin extends Border
  {
    //maybe needed as a hack for the flex internals. Values may need to be changed for specific cases
    override public function get measuredWidth():Number {return 16; }
    override public function get measuredHeight():Number {return 10;}   

    override protected function updateDisplayList(w:Number, h:Number):void {
      super.updateDisplayList(w,h);

      if(this.parent) {
        var g:Graphics = this.graphics;
        g.clear();

        //top 
        g.beginFill(0xFF0000);
        g.drawRoundRect(1,1, w, parent.scrollPosition);
        g.endFill();

        //bottom
        g.beginFill(0x00FF00);
        g.drawRoundRect(0, parent.scrollPosition, w, h);
        g.endFill();

      }
    }    
  }