Using the TextRange class to hightlight text

I was working on a mini-app the other night, and was trying to figure out how to color only certain words in a text-based control. After a bit of poking around, I discovered that the TextRange class seems to be the right tool for the job.

Full code after the jump.

The following example uses a two-thumb Slider control to let you select a range of text to apply some formatting to. The text color can be controlled using the handy ColorPicker control, and feel free to erase my filler text and try something else. As the text in the TextArea changes, the TextRange and slider gets recalcuated.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
            import mx.controls.textClasses.TextRange;

            private var tr:TextRange;

            private function slider_change(evt:SliderEvent):void {
                updateTextRange();
            }

            private function textArea_change(evt:Event):void {
                // Recalculate length.
                slider.maximum = textArea.length;

                updateTextRange();
            }

            private function updateTextRange():void {
                try {
                    /* Default the TextArea control's text color back to black. */
                    tr = new TextRange(textArea);
                    tr.color = "black";
                    tr.textDecoration = "normal";

                    /* Set the text color to red for the values in the Slider. */
                    tr = new TextRange(textArea, false, slider.values[0], slider.values[1]);
                    tr.color = colorPicker.selectedColor;
                    tr.textDecoration = "underline";
                } catch (err:RangeError) {
                    /* Somethin' ain't right! I dare say you have no text, son! */
                }
            }
        ]]>
    </mx:Script>

    <mx:VBox width="380">
        <mx:HBox>
            <mx:Label text="Text selection color:" />
            <mx:ColorPicker id="colorPicker" selectedColor="red" />
        </mx:HBox>

        <mx:HBox>
            <mx:Label text="Text selection range:" />
            <mx:HSlider id="slider" thumbCount="2" liveDragging="true" snapInterval="1" dataTipPrecision="0" minimum="0" maximum="{textArea.length}" change="slider_change(event)" />
            <mx:Label text="({slider.values[0]}, {slider.values[1]})" />
        </mx:HBox>

        <mx:TextArea id="textArea" width="100%" height="120" change="textArea_change(event)">
            <mx:text><![CDATA[The quick brown fox jumped over the lazy dog.]]></mx:text>
        </mx:TextArea>
    </mx:VBox>

</mx:Application>

View source enabled in the following example