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

    <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.getItemAt(0)}, {slider.values.getItemAt(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>