Setting the thumb color based on the current value of a Spark HSlider control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/19/setting-the-thumb-color-based-on-the-current-value-of-a-spark-hslider-control-in-flex-4/ -->
<s:Application name="Spark_HSlider_thumb_chromeColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:Button label="Set value"
                click="sldr.value = int(Math.random() * sldr.maximum);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function sldr_changeHandler(evt:Event):void {
                var clr:Object = "red";
                if (sldr.value >= 8) {
                    clr = "haloGreen";
                } else if (sldr.value >= 6) {
                    clr = "yellow";
                }
                sldr.thumb.setStyle("chromeColor", clr);
            }
        ]]>
    </fx:Script>
 
    <s:HSlider id="sldr"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="sldr_changeHandler(event);"
            change="sldr_changeHandler(event);"
            valueCommit="sldr_changeHandler(event);"/>
 
</s:Application>