I was playing around with the HSlider the other day and needed to format the data tool tip. Thankfully, the Flex SDK makes it very very easy, all you need to do to override the default data tip using the dataTipFormatFunction property. By simply passing in the name of a user-defined function, you can format the data tip text however you want (such as prefixing dollar signs or what have you).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/18/formatting-data-tips-in-a-slider/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function formatFunction(item:Object):String {
                  return "Minium price: $" + item.toString();
            }
        ]]>
    </mx:Script>

    <mx:HSlider id="slider"
            width="200"
            liveDragging="true"
            minimum="1"
            snapInterval="1"
            tickInterval="1"
            value="3"
            dataTipFormatFunction="formatFunction" />

    <mx:Label id="lbl" text="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

Good luck, and happy Flexing!

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

4 Responses to Formatting data tips in a Slider

  1. Bunche says:

    Hi. Any tips on how the dataTipFormatFunction can determine which thumb the value refers to when you have more than one thumb? Thanks.

  2. tim says:

    Hi there,

    I have a Hslider which i use for my videoplayer. Is it possible for the Datatip to be always visible?

    Thanks a bunch!

    Tim

  3. Kannan says:

    Nice examples, I am starting my flex journey here. And thank you for all this wonderful examples you have given. Which will give lot of noobs like as a fast footprint to follow on.

    Thanks & Regards,
    Kannan. R

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree