<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/halo" 
               xmlns:local="*"
               minWidth="1024" minHeight="768"
               currentStateChanging="appStateChangingHandler(event)"
               currentStateChange="appStateChangeHandler(event)" viewSourceURL="srcview/index.html">
    
    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Problem: Using state groups to set the properties of sliders SOMETIMES causes those
    properties to be set to NaN.
    
    Why?
    
    The program provides a 100% reproducible example of the problem. Whenever the
    application state changes to s4 or s5, the slider's minimum and maximum values are set
    to NaN.
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    
    <fx:Script>
        <![CDATA[
            import mx.events.StateChangeEvent;
            
            // Bindable copies of slider properties, updated in appStateChangeHandler(),
            // for use in slider labels (there must be a better way to do this).
            [Bindable]private var sliderMin:Number;
            [Bindable]private var sliderMax:Number;

            protected function appStateChangingHandler(event:StateChangeEvent):void {
                var s:String = "State changing from " + event.oldState + " to " + event.newState;
                trace(s);
                richText.text += "\n" + s;
            }

            protected function appStateChangeHandler(event:StateChangeEvent):void {
                // update bindable variables for use in slider labels
                sliderMin = slider.minimum;
                sliderMax = slider.maximum;
                
                var s:String = "\t" + this.currentState + "\t" + slider.minimum + "\t" + slider.value + "\t" + slider.maximum;
                trace(s);
                richText.text += "\n" + s;
            }
        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="s1"/>
        <s:State name="s2"/>
        <s:State name="s3" stateGroups="narrowRange"/>
        <s:State name="s4" stateGroups="narrowRange"/>    <!-- slider properties are NaN: why? --> 
        <s:State name="s5" stateGroups="wideRange"/>    <!-- slider properties are NaN: why? --> 
        <s:State name="s6" stateGroups="wideRange"/>
    </s:states>    
    
    <s:VSlider id="slider"
               x="6" y="48" 
               minimum="{-100}"                value="0"                maximum="{100}" 
               minimum.narrowRange="{-50}"    value.narrowRange="0"    maximum.narrowRange="{50}" 
               minimum.wideRange="{-200}"    value.wideRange="0"        maximum.wideRange="{200}"/>
    
    <local:StateButtonBar id="statesButtonBar" x="10" y="10" width="290"/>
    
    <s:RichEditableText id="richText" x="91" y="46" width="209" height="300" clipAndEnableScrolling="true"
                tabStops="35 70 105 140 175 210 245 280 315"/>
    
    <s:Label text="{sliderMax}"        x="20" y="46"/>
    <s:Label text="{slider.value}"    x="20" y="94"/>
    <s:Label text="{sliderMin}"        x="20" y="141"/>
</s:Application>