2 Replies Latest reply on Oct 3, 2009 9:29 PM by Flex harUI

    How to determine what triggered a slider's CHANGE event.

    ScepterSW

      I have a slider control and a text input control, both are bound to a variable. The user can use either control to enter a value. Event listeners attached to the CHANGE event on both controls update the variable, triggering another CHANGE event on the opposite control (due to the bound varaible) so that both controls reflect the same value.

       

      This is the desired result with one problem. If you set a snap interval on the slider and enter a value using the text input control, the value on the slider is rounded to the nearest increment, the variable is reset to the rounded value on the slider and the text input control is updated with the rounded value. If a more precise value is entered into the text input control, I want the slider to update to the nearest snap interval, but I do not want the value of the variable or the text in the input control to in turn be rounded by the slider.

       

      If I set allowTrackClick="False" and attach the event listener to the thumbRelease event instead of the change event on the slider, I can prevent the slider from updating the variable when the slider has changed as a result of some text input (versus a direct track click or thumb release). But my users are accustomed to being able to click the slider track as an alternative to sliding the thumb.

       

      1) There does not appear to be an event associated with clicking the slider track so that I can attach an event listener to that action.

      2) The alternative, the change event, occurs when the bound variable is changed or the slider is used directly. The click target will be either the track or the thumb, even when the change event was envoked by a change to the bound variable, so checking the click target is no help.

       

      Question - how can I determine whether a slider's change event was triggered by a change to the bound variable versus a direct action on the slider (track click or thumb release).

       

      Here is a simple example:

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:WindowedApplication

       

       

      xmlns:mx=http://www.adobe.com/2006/mxml

      layout="

      absolute"

      creationComplete="init()"

       

      >

       

       

      <mx:Script>

      <![CDATA[

       

       

      import

      flash.events.*;

       

       

      import

      mx.events.*

       

       

      [

       

      Bindable

      ]

       

       

      private var

      myValue:int=50;

       

       

       

      private function init():void

      {

      myText.addEventListener(Event.CHANGE, textEventHandler);

      mySlider.addEventListener(Event.CHANGE, sliderEventHandler);

      }

       

       

       

      private function textEventHandler(event:Event):void

      {

      myValue = event.currentTarget.text;

       

       

      trace("Current Target: " + event.currentTarget.id);

       

       

      trace("Target: " + event.target.id);

      }

       

       

       

      private function sliderEventHandler(event:SliderEvent):void

      {

      myValue = event.currentTarget.value;

       

       

      trace("Current Target: " + event.currentTarget.id);

       

       

      trace("Click Target: " + event.clickTarget);

       

       

      trace("Target: " + event.target.id);

       

       

      trace("Trigger Event: " + event.triggerEvent);

       

       

      trace("Key Code: " + event.keyCode);

      }

       

       

      ]]>

       

       

      </mx:Script>

       

       

      <mx:VBox>

       

       

      <mx:HBox id="myHBox" x="20" y="20" width="100%"

      >

       

       

      <mx:TextInput id="myText" text="{myValue}"

      />

       

       

      <mx:HSlider id="mySlider" minimum="0" maximum="100" snapInterval="5" labels="[0,20,40,60,80,100]" tickInterval="5" value="{myValue}" width="200"

      />

       

       

      </mx:HBox>

       

       

       

       

      </mx:VBox>

       

      </mx:WindowedApplication>