Formatting data tips in a Slider

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 as: dataTipFormatFunction