Toggling data tips on the HSlider control in Flex

The following example shows how you can toggle data tips on the Flex HSlider control by setting the Boolean showDataTips property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/28/toggling-data-tips-on-the-hslider-control-in-flex/ -->
<mx:Application name="HSlider_showDataTip_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="showDataTip:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HSlider id="slider"
            showDataTip="{checkBox.selected}"
            liveDragging="true" />

</mx:Application>

View source is enabled in the following example.

You can also set the showDataTip property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/28/toggling-data-tips-on-the-hslider-control-in-flex/ -->
<mx:Application name="HSlider_showDataTip_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                slider.showDataTip = checkBox.selected;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="showDataTip:">
                <mx:CheckBox id="checkBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HSlider id="slider"
            showDataTip="{checkBox.selected}"
            liveDragging="true" />

</mx:Application>

Tagged as: showDataTip