Using an embedded font with the Slider controls in Flex

The following example shows how you can use an embedded font with the Flex HSlider control by setting the fontFamily and labelStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
        }

        .sliderLabelStyleName {
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>

    <mx:HSlider id="slider"
            minimum="0"
            maximum="20"
            value="0"
            labels="[0,5,10,15,20]"
            snapInterval="1"
            tickInterval="1"
            liveDragging="true"
            labelStyleName="sliderLabelStyleName"
            width="200" />

</mx:Application>

View source is enabled in the following example.

You can also set the labelStyleName and fontFamily styles using an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
        }

        Slider {
            labelStyleName: sliderLabelStyleName;
        }

        .sliderLabelStyleName {
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>

    <mx:HSlider id="slider"
            minimum="0"
            maximum="20"
            value="0"
            labels="[0,5,10,15,20]"
            snapInterval="1"
            tickInterval="1"
            liveDragging="true"
            width="200" />

</mx:Application>

Or, you can also set the labelStyleName and fontFamily styles using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.HSlider;

            [Embed(systemFont="Base 02",
                    fontName="EmbeddedBase02",
                    advancedAntiAliasing="true",
                    mimeType="application/x-font")]
            private var EmbeddedBase02:Class;

            private var slider:HSlider;

            private function init():void {
                var labelStyleName:CSSStyleDeclaration = new CSSStyleDeclaration();
                labelStyleName.setStyle("fontFamily", "EmbeddedBase02");

                StyleManager.setStyleDeclaration(".sliderLabelStyleName", labelStyleName, true);

                slider = new HSlider();
                slider.minimum = 0;
                slider.maximum = 20;
                slider.value = 0;
                slider.labels = [0, 5, 10, 15, 20];
                slider.snapInterval = 1;
                slider.tickInterval = 1;
                slider.setStyle("labelStyleName", "sliderLabelStyleName");
                slider.width = 200;
                addChild(slider);
            }
        ]]>
    </mx:Script>

</mx:Application>

Base 02 font by http://www.stereo-type.net/.

Tagged as: fontFamily