<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx            =    "http://www.adobe.com/2006/mxml" 
    layout                =    "absolute"
    width                =    "300"
    height                =    "200"
    creationComplete    =    "handleCreationComplete()"
     viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.formatters.NumberFormatter;
            
            public static var ONE_THIRD:Number                     =    .3333333333;
            public static var TWO_THIRDS:Number                 =    .6666666667;
            public static var SLIDER_ONE_THIRD_VALUE:Number     =     25000;
            public static var SLIDER_TWO_THIRDS_VALUE:Number    =     100000;
            public static var SLIDER_FULL_VALUE:Number             =     10000000;
            public static var SLIDER_LABELS:Array                =    ['0','25k','100k','10m'];
            
            private var numberFormatter:NumberFormatter;
            [Bindable]
            private var sliderValue:String;
            
            private function handleCreationComplete():void
            {
                this.numberFormatter = new NumberFormatter();
                this.numberFormatter.useThousandsSeparator = true;
                this.numberFormatter.precision = 0;
                this.textInput.addEventListener(KeyboardEvent.KEY_DOWN,handleEnterKey);
                
                slider.labels = GraduatedSlider.SLIDER_LABELS;
                handleSliderChange();
            }
        
            private function handleSliderChange():void
            {
                var thumbPercentage:Number = slider.value / slider.maximum;
                var newTextInputText:String = '';
                var multiplier:Number;
                
                if( thumbPercentage <= GraduatedSlider.ONE_THIRD )
                {
                    newTextInputText = numberFormatter.format((thumbPercentage / GraduatedSlider.ONE_THIRD) * GraduatedSlider.SLIDER_ONE_THIRD_VALUE);
                }
                else if( thumbPercentage > GraduatedSlider.ONE_THIRD && thumbPercentage <= GraduatedSlider.TWO_THIRDS )
                {
                    multiplier = ((GraduatedSlider.TWO_THIRDS - thumbPercentage) / GraduatedSlider.ONE_THIRD); 
                    newTextInputText = numberFormatter.format((((thumbPercentage / GraduatedSlider.TWO_THIRDS) * GraduatedSlider.SLIDER_TWO_THIRDS_VALUE) - (multiplier * GraduatedSlider.SLIDER_ONE_THIRD_VALUE)));
                }
                else
                {
                    multiplier = ((thumbPercentage - GraduatedSlider.TWO_THIRDS) / GraduatedSlider.ONE_THIRD);
                    //trace(multiplier);
                    newTextInputText = numberFormatter.format(((multiplier * GraduatedSlider.SLIDER_FULL_VALUE) + ((1 - multiplier) * GraduatedSlider.SLIDER_TWO_THIRDS_VALUE)));  
                }        
                this.sliderValue = newTextInputText;
                slider.dataTipFormatFunction = sliderDataTip;
                setTextInputValue();
            }
            
            private function handleTextChange():void
            {
                var pattern:RegExp = /\D/g;
                var value:Number = Number(textInput.text.replace(pattern,''));
                trace(value);
                if( value < 0 )
                {
                    value = 0;
                }
                else if( value > GraduatedSlider.SLIDER_FULL_VALUE )
                {
                    value = GraduatedSlider.SLIDER_FULL_VALUE;
                }
                this.sliderValue = numberFormatter.format(value);
                trace(this.sliderValue);
                
                if( value <= GraduatedSlider.SLIDER_ONE_THIRD_VALUE )
                {
                    slider.value = ((value / GraduatedSlider.SLIDER_ONE_THIRD_VALUE) * GraduatedSlider.ONE_THIRD) * GraduatedSlider.SLIDER_FULL_VALUE;
                }
                else if( value > GraduatedSlider.SLIDER_ONE_THIRD_VALUE && value <= GraduatedSlider.SLIDER_TWO_THIRDS_VALUE )
                {
                    slider.value = (((value / GraduatedSlider.SLIDER_TWO_THIRDS_VALUE) * GraduatedSlider.ONE_THIRD) + GraduatedSlider.ONE_THIRD) * GraduatedSlider.SLIDER_FULL_VALUE;
                }
                else
                {
                    slider.value = (((value / GraduatedSlider.SLIDER_FULL_VALUE) * GraduatedSlider.ONE_THIRD) + GraduatedSlider.TWO_THIRDS) * GraduatedSlider.SLIDER_FULL_VALUE;                 
                }
            }
            
            private function handleEnterKey( event:KeyboardEvent ):void
            {
                if( event.keyCode == 13 )
                {
                    slider.setFocus();
                    handleTextChange();
                    setTextInputValue();
                }
            }
            
            private function sliderDataTip(o:Object):String
            {
                return "$"+this.sliderValue;
            }
            
            private function setTextInputValue():void
            {
                textInput.text = "$"+this.sliderValue;
            }
        ]]>
    </mx:Script>    
    
    <mx:VBox width="100%" height="50%" horizontalAlign="center" verticalAlign="middle" verticalGap="30" paddingTop="30">
        <mx:HSlider 
            id                =    "slider" 
            minimum            =    "0" 
            maximum            =    "10000000" 
            allowTrackClick    =    "true" 
            width            =    "75%" 
            liveDragging    =    "true" 
            useHandCursor    =    "true" 
            height            =    "20" 
            labelOffset        =    "0"
            change            =    "handleSliderChange();"
            />
        
        <mx:TextInput        
            id                =    "textInput"
            text            =    ""
            restrict        =    "[0-9]."
            />
        <mx:Label
            text            =    "Move the slider or type a new value and hit 'Enter'"
            />
    </mx:VBox>
</mx:Application>