1 Reply Latest reply on Jul 28, 2010 1:48 PM by -skitch-

    Flex HSlider issues

    -skitch- Level 1

      Hello All,

       

      I have an issue with the vertical alignment of an HSlider within a HBox that has multiple components.  The HBox has a verticalAlign = middle.  My slider has a custom track skin that extends the SliderTrackSkin class given by Flex.  The problem is that the slider track is not vertically aligned with the HBox...

       

      The reason this is more apparent is because Flex's slider track is like 2 pixels high.  Mine is 8.  It seems Flex does not take in account that the track skin should affect the positioning of the component.  I've posted some code below for reference.

       

      If anyone has a solution of setting a vertical offset to the slider component, I would love to hear it.

       

      Thanks,

      Skitch

       

      SliderSkinClass:

           import flash.display.GradientType;
         
          import mx.skins.halo.SliderTrackSkin;
          import mx.styles.StyleManager;
          import mx.utils.ColorUtil;
         
          public class IngestSliderTrackSkin extends SliderTrackSkin
          {
              override public function get measuredHeight():Number
              {
                  return 8;
              }
             
              override protected function updateDisplayList(w:Number, h:Number):void
              {
                  super.updateDisplayList(w, h);
                 
                  // User-defined styles.
                  var borderColor:Number = getStyle("borderColor");
                  var fillAlphas:Array = getStyle("fillAlphas");
                  var fillColors:Array = getStyle("trackColors") as Array;
                  StyleManager.getColorNames(fillColors);

                  graphics.clear();
                 
                  // DRAW THE BORDER
                  drawRoundRect(-4, 0, w + 4, h, 3,
                      borderColor, 1);
                 
                  // DRAW THE FILL
                  drawRoundRect(-3, 1, w+2, h-2, 3,
                      fillColors, fillAlphas,
                      verticalGradientMatrix(-3,1,w+2, h-2), GradientType.LINEAR, [0,255]);
              }
          }

       

      Slider Usage:

               <mx:Style>
                   .ingestSlider {
                       trackSkin:ClassReference('IngestSliderTrackSkin');
                       borderColor: #737373;
                       trackColors: #424345, #FF0057;
                       fillAlphas: 1, 1;
                   }
               </mx:Style>

       

                <mx:HSlider
                      width="75"
                      liveDragging="true"
                      styleName="ingestSlider"/>