I tried a lot of things such as dispatching the thumbPress event after every valueCommit event is dispatched but was not able to display it continously.

Thanks!

B

Sorry, it’s me against. I write the two coponents, but i allways don’t find the solution. If you can help me it will be great.

main.mxml
——————————————————————

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:component="comps.*">
<mx:Script>
    <![CDATA[
        import mx.events.SliderEvent;
        import mx.collections.ArrayCollection;

        var aRs1:Number = 10;
	var aRs2:Number = 40;

	private function init():void {
            slider.value = slider.getStyle("dataTipOffset");
        }

        [Bindable]
        public var myAC:ArrayCollection = new ArrayCollection([{Year:2004, Sales:8000, Cost:1300}]);

        public function get Net():Number {
            var a:Number = myAC.getItemAt(0).Sales;
            return ( a - slider.value );
        }

        private function slider_change(evt:SliderEvent):void {
            lbl.text = valDisplay.format(Net);
        }
    ]]>
</mx:Script>

<mx:NumberFormatter id="valDisplay"	thousandsSeparatorFrom="," precision="0"/>

<component:AA x="10" 	y="20"/>
<component:BB x="110" 	y="20"/>

</mx:Application>

COMPONENT AA.mxml
——————————————————————

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="30">
	<mx:FormItem label="dataTipOffset:" direction="horizontal">
    	<mx:HSlider id="slider"
     	   	minimum="100"
     	   	maximum="300"
      	  	snapInterval="100"
       	 	tickInterval="100"
       	 	liveDragging="true"
        	dataTipOffset="{slider.value}"
        	dataTipPrecision="0"
        	showTrackHighlight="true"
        	initialize="init();"
        	change="slider_change(event);" />
	</mx:FormItem>
	<mx:Label text="{slider.value}" width="80" />
</mx:Canvas>

COMPONENT BB.mxml
——————————————————————

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="80" >
	<mx:Label id="lbl" text="$ {valDisplay.format(Net)}" />
	<mx:Label          text="{aRs1}" />
	<mx:Label          text="{aRs2}" />
</mx:Canvas>

Looking for the last modified script:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
				xmlns:component="comps.*">
<mx:Script>
    <![CDATA[
        import mx.events.SliderEvent;
        import mx.collections.ArrayCollection;

        private function init():void {
            slider.value = slider.getStyle("dataTipOffset");
        }

        [Bindable]
        public var myAC:ArrayCollection = new ArrayCollection([{Year:2004, Sales:8000, Cost:1300}]);

        public function get Net():Number {
            var a:Number = myAC.getItemAt(0).Sales;
            var b:Number = slider.value;
            return ( a - slider.value );
        }

        private function slider_change(evt:SliderEvent):void {
            //lbl.text = Net.toString();
            lbl.text = valDisplay.format(Net);
        }
    ]]>
</mx:Script>

<mx:NumberFormatter id="valDisplay"	thousandsSeparatorFrom="," precision="0"/>

<mx:FormItem label="dataTipOffset:" direction="horizontal">
    <mx:HSlider id="slider"
        minimum="100"
        maximum="300"
        snapInterval="100"
        tickInterval="100"
        liveDragging="true"
        dataTipOffset="{slider.value}"
        dataTipPrecision="0"
        showTrackHighlight="true"
        initialize="init();"
        change="slider_change(event);" />
    <mx:Label text="{slider.value}" width="80" />
</mx:FormItem>

<mx:Label id="lbl" x="400" text="$ {valDisplay.format(Net)}" width="80" />

</mx:Application>

I add xmlns:component=”comps.*” in order to have TWO components. The first one which contain the “formItem” and the second one the “label”. I have passed many time to try, but i don’t found the solution.
Can you help me Please.

Wow, a million thanks Peter, that’s the fastest response I’ve got so far.

Change the <mx:NumberFormatter /> to <mx:CurrencyFormatter />, and then change the slider_change() method to the following:

private function slider_change(evt:SliderEvent):void {
    lbl.text = valDisplay.format(Net);
}

Peter

Thanks.

Taking the same example, i’m looking for to use mx:formatter.
How to have for the two labels, the formatter : $ ###,### with the precision 0:
I made the coode below but i have no result. Thank for your help

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
    <![CDATA[
        import mx.events.SliderEvent;
        import mx.collections.ArrayCollection;

        private function init():void {
            slider.value = slider.getStyle("dataTipOffset");
        }

        [Bindable]
        public var myAC:ArrayCollection = new ArrayCollection([{Year:2004, Sales:8000, Cost:1300}]);

        public function get Net():Number {
            var a:Number = myAC.getItemAt(0).Sales;
            var b:Number = slider.value;
            return ( a - slider.value );
        }

        private function slider_change(evt:SliderEvent):void {
            lbl.text = Net.toString();
        }
    ]]>
</mx:Script>

<mx:NumberFormatter id="valDisplay"	thousandsSeparatorFrom="," precision="0"/>

<mx:FormItem label="dataTipOffset:" direction="horizontal">
    <mx:HSlider id="slider"
        minimum="100"
        maximum="300"
        snapInterval="100"
        tickInterval="100"
        liveDragging="true"
        dataTipOffset="{slider.value}"
        dataTipPrecision="0"
        showTrackHighlight="true"
        initialize="init();"
        change="slider_change(event);" />
    <mx:Label text="{slider.value}" width="80" />
    <mx:Label id="lbl" text="$ {valDisplay.format(Net)}" width="80" />
</mx:FormItem>

</mx:Application>

Best Regards

Instead of using bindings, I’d probably create a listener for the Slider control’s change event.

Something like the following:

<mx:Script>
    <![CDATA[
        import mx.events.SliderEvent;

        import mx.collections.ArrayCollection;

        private function init():void {
            slider.value = slider.getStyle("dataTipOffset");
        }

        [Bindable]
        public var myAC:ArrayCollection = new ArrayCollection([{Year:2004, Sales:8000, Cost:1300}]);

        public function get Net():Number {
            var a:Number = myAC.getItemAt(0).Sales;
            var b:Number = slider.value;
            return ( a - slider.value );
        }

        private function slider_change(evt:SliderEvent):void {
            lbl.text = Net.toString();
        }
    ]]>
</mx:Script>
...
<mx:FormItem label="dataTipOffset:" direction="horizontal">
    <mx:HSlider id="slider"
        minimum="100"
        maximum="300"
        snapInterval="100"
        tickInterval="100"
        liveDragging="true"
        dataTipOffset="{slider.value}"
        dataTipPrecision="0"
        showTrackHighlight="true"
        initialize="init();"
        change="slider_change(event);" />
    <mx:Label text="{slider.value}" width="80" />
    <mx:Label id="lbl" text="{Net}" width="80" />
</mx:FormItem>

Peter

Your example is very interesting. I add a function but i have no result. Can you help me please.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[

        	import mx.collections.ArrayCollection;

            private function init():void {
               slider.value = slider.getStyle("dataTipOffset");
            }

           [Bindable]
			public var myAC:ArrayCollection = new ArrayCollection([
				{Year:"2004", Sales:8000, Cost:1300},
			]);

			public function get Net():Number {
				var a:Number =	myAC.getItemAt(0).Sales;
				var b:Number =	slider.value;
				return ( a - slider.value );
				}

        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="dataTipOffset:" direction="horizontal">
            <mx:HSlider id="slider"
                    minimum="100"
                    maximum="300"
                    snapInterval="100"
                    tickInterval="100"
                    liveDragging="true"
                    dataTipOffset="{slider.value}"
                    dataTipPrecision="0"
                    showTrackHighlight="true"
                    initialize="init();" />
            <mx:Label text="{slider.value}" width="80" />
            <mx:Label text="{Net}" width="80" />
        </mx:FormItem>
    </mx:Form>
</mx:Application>