Hslider lables not located on right ticks?

Question

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

Answer 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>