Setting the data tip offset in a Slider control in Flex

by Peter deHaan on May 9, 2008

The following example shows how you can control the data tip offset in a Flex HSlider control by setting the dataTipOffset style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/09/setting-the-data-tip-offset-in-a-slider-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                slider.value = slider.getStyle("dataTipOffset");
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="dataTipOffset:" direction="horizontal">
            <mx:HSlider id="slider"
                    minimum="-10"
                    maximum="30"
                    snapInterval="1"
                    tickInterval="5"
                    liveDragging="true"
                    dataTipOffset="{slider.value}"
                    dataTipPrecision="0"
                    showTrackHighlight="true"
                    initialize="init();" />
            <mx:Label text="{slider.value}" width="30" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

And due to popular demand, here is the “same” example, in ActionScript:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/09/setting-the-data-tip-offset-in-a-slider-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <comps:MySlider />

</mx:Application>

comps/MySlider.as

package comps {
    import mx.containers.Form;
    import mx.containers.FormItem;
    import mx.containers.FormItemDirection;
    import mx.controls.HSlider;
    import mx.controls.Label;
    import mx.events.SliderEvent;

    public class MySlider extends Form {
        public var slider:HSlider
        public var lbl:Label;
        public var formItem:FormItem;

        public function MySlider() {
            super();
            init();
        }

        private function init():void {
            slider = new HSlider();
            slider.minimum = -10;
            slider.maximum = 30;
            slider.value = slider.getStyle("dataTipOffset");
            slider.snapInterval = 1;
            slider.tickInterval = 5;
            slider.liveDragging = true;
            slider.setStyle("dataTipPrecision", 0);
            slider.setStyle("showTrackHighlight", true);
            slider.addEventListener(SliderEvent.CHANGE, slider_change);

            lbl = new Label();
            lbl.width = 30;

            formItem = new FormItem();
            formItem.label = "dataTipOffset:";
            formItem.direction = FormItemDirection.HORIZONTAL;
            formItem.addChild(slider);
            formItem.addChild(lbl);
            addChild(formItem);
        }

        private function slider_change(evt:SliderEvent):void {
            slider.setStyle("dataTipOffset", evt.value);
            lbl.text = evt.value.toString();
        }
    }
}

View source is enabled in the following example.

Tagged as: dataTipOffset

{ 8 comments… read them below or add one }

1 Pierre May 26, 2008 at 6:50 am

Hello,

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>

2 peterd May 26, 2008 at 11:00 pm

Pierre,

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

3 Pierre May 27, 2008 at 1:12 am

Hello 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

4 peterd May 27, 2008 at 1:25 am

Pierre,

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

5 Pierre May 27, 2008 at 2:10 am

Hello Peter

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

6 Pierre June 5, 2008 at 5:36 am

Hello Peter,

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.

7 Pierre June 6, 2008 at 7:10 am

Hello,

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>

8 Brandon August 5, 2008 at 10:07 am

How about making datatips permanently visible? Have you had any luck trying that? I’d love to see how you do it – ’cause I’m at a dead-end.

Thanks!

Setting the data tip offset in a Slider control in Flex

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

Setting the data tip offset in a Slider control in Flex

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising