<?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>