2 Replies Latest reply on Sep 3, 2009 3:59 AM by ZKVID

    Multi Color Flex VSlider

    ZKVID Level 1

      Hi,
      I’m a beginner in flex world.I need a vslider with two thumb.It will be such that, screen color of the slider below the lower thumb will show red color,in between two thumb will show orange color and above upper thumb will show green color.
      Can you please help me?

        • 1. Re: Multi Color Flex VSlider
          leybniz Level 4

          ColorSliderHighlightSkin.as:

          package {

          import mx.skins.halo.SliderHighlightSkin;

          public class ColorSliderHighlightSkin extends SliderHighlightSkin {

            function ColorSliderHighlightSkin() {

            }

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

             var middleColor:int = 0xFF7F00; // Orange

             graphics.clear();

             // Highlight
             drawRoundRect(0, 0, w, 1, 0, middleColor, 0.7);
             drawRoundRect(0, h - 1, w, 1, 0, middleColor, 1);
             drawRoundRect(0, h - 2, w, 1, 0, middleColor, 0.4);
            }

          }
          }

           

          <mx:VSlider
            height="200"
            thumbCount="2"
            fillAlphas="[ 1.0, 1.0 ]"
            maximum="255"
            values="[100, 150]"
            trackHighlightSkin="ColorSliderHighlightSkin"
            width="50"
            showTrackHighlight="true"
            trackColors="[#FF0000, #00FF00]" />

          • 2. Re: Multi Color Flex VSlider
            ZKVID Level 1

            Thanx a lot Alex