Setting the data tip offset in a Slider control in Flex

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.

10 thoughts on “Setting the data tip offset in a Slider control in Flex

  1. 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. 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. 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. 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. Hello Peter

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

  6. 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. 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. 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!

    B

  9. Is it possible to control the slider thumb position programatically, when we have two sliders? I tried modifying the HSlider.values property, but the thumbs do not pick up the data change. Maybe I am doing something wrong?

  10. Is there any way to continously show the dataTip of the Slider when the value is increasing??

    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.

Comments are closed.