3 Replies Latest reply on Feb 12, 2010 3:30 AM by BrianIreland

    Hslider lables not located on right ticks?

    mark416 Level 1

      Please see attached file,

       

      Why the Labels are not on right ticks.

       

       

      <mx:HSlider id="hsView"    minimum="100" maximum="10000"  width="100%" value="500" visible="true"
            tickValues ="[100, 500, 1000, 5000, 10000 ]" labels="[100 ,500,1000, 5000, 10000 ]"   x="0" y="13"
                 />

       

      How to fix this? Thanks

       

       

      Mark

        • 1. Re: Hslider lables not located on right ticks?
          Jason Szeto Level 3

          Mark,

           

          Since labels are just text, the Slider will just try space the labels so that the center of the labels are spaced out evenly. To change this behavior, you'll have to subclass and override updateDisplayList to perform your own layoutLabels function.

           

          An alternative is to fill the labels with empty strings to pad the labels.

           

          Here is a simple example:

           

              <mx:HSlider id="hsView"    minimum="1" maximum="8"  width="600" value="1" visible="true"
                          tickValues ="[1, 2, 4, 8]" labels="['1','2','','4','','','','8']"   />

          Jason

          • 2. Re: Hslider lables not located on right ticks?
            Jason Szeto Level 3

            Mark,

             

            I thought of a third alternative.

            Don't set the labels property. Instead, put the Slider in a Canvas and explicitly put mx:Labels above the ticks. For a resizable layout, you might need to programmatically calculated these.

             

            Jason

            • 3. Re: Hslider lables not located on right ticks?
              BrianIreland Level 1

              The problem here is that your not using a linear scale i.e. 1,2,3. Yours is more like 1,2,5,10 which makes

              the slider a little trickier. You need to set the number of ticks, in this case 5, set the min and max as 1 and

              5, snap interval to 1, and when a user moves the slider, capture the value (1-5). Then its a matter of

              assigning values to each slider interval e.g. 1 = 100, 2 = 500 etc.

               

              The following should work fine.

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

              <mx:Script><![CDATA[
                   import mx.events.SliderEvent;
                   [Bindable]
                   private var myValue:int;
                   private function sliderChange(event:SliderEvent):void
                   {
                       var sliderValue:int = hsView.value;
                      
                       switch(sliderValue){
                          case 1:
                              myValue = 100;
                              break;
                          case 2:
                              myValue = 500;
                              break;
                          case 3:
                              myValue = 1000;
                          break;
                          //etc....
                      }
                   }
              ]]></mx:Script>

                  <mx:HSlider id="hsView" width="100%" value="500" visible="true"  
                      minimum="1" maximum="5" 
                      tickInterval = "1"   
                      snapInterval="1"   
                      showDataTip="false" 
                        labels="[100 ,500,1000, 5000, 10000 ]"   x="0" y="13"
                      change="sliderChange(event)"
                   />   
                  <mx:Label id="sliderLabel" x="25" y="72" width="66"
                       text="{myValue}"
                  />

               

              </mx:WindowedApplication>