How do you customize the thumb appearance on a Spark Slider control in Flex 4?

Let's assume you add a VSlider to your app like this:

<s:VSlider id="mySlider" />

Now, using the new id selectors, specify a new skinClass for the slider like this (the file to use is at the bottom of this post):

#mySlider {
skinClass:
ClassReference("com.mycompany.skins.ThumbSkinnableVSliderSkin");
}

Now, you'll note in the skin for the VSlider below, that the id of the thumb is "thumb", so you will be able to specify your own skin for the thumb using the descendant and id selector features of Flex 4 styling:

#mySlider #thumb {
skinClass: ClassReference("com.mycompany.skins.VSliderThumbSkin1");
}

Here is the new VSlider skin you should use. Note that I have removed the skinClass definition for the thumb, but left it for the track, so you can see the difference. To style the track, remove its skinClass definition as well.

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED

Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying
it.

-->
<!--- The default skin class for the Spark VSlider component.
The thumb and track skins are defined by the

VSliderThumbSkin and VSliderTrackSkin classes, respectively.
 

@langversion 3.0
@playerversion Flash 10

@playerversion AIR 1.5
@productversion Flex 4

-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="11"
alpha.disabled="0.5">
<fx:Metadata>

<![CDATA[
/**

* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/

[HostComponent("spark.components.VSlider")]
]]>

</fx:Metadata>
 

<fx:Script fb:purpose="styling">

/* Define the skin elements that should not be colorized.

For slider, the skin itself is colorized but the individual parts
are not. */
static private const exclusions:Array = ["track", "thumb"];

/**
* @private
*/
override public function get colorizeExclusions():Array {return
exclusions;}

/**
* @private
*/

override protected function initializationComplete():void
{

useBaseColor = true;
super.initializationComplete();

}
</fx:Script>

<fx:Script>

/**
* @private
*/
override protected function measure() : void

{
// Temporarily move the thumb to the top of the Slider so
measurement

// doesn't factor in its y position. This allows resizing the
// VSlider to less than 100px in height.

var thumbPos:Number = thumb.getLayoutBoundsY();

thumb.setLayoutBoundsPosition(thumb.getLayoutBoundsX(), 0);

super.measure();
thumb.setLayoutBoundsPosition(thumb.getLayoutBoundsX(), thumbPos);

}
</fx:Script>

<s:states>

<s:State name="normal" />
<s:State name="disabled" />

</s:states>
 

<fx:Declarations>
<!--- Defines the appearance of the the Slider's DataTip. To
customize the DataTip's appearance, create a custom VSliderSkin
class. -->

<fx:Component id="dataTip">
<s:DataRenderer minHeight="24" minWidth="40" x="20">

<s:Rect top="0" left="0" right="0" bottom="0">
<s:fill>

<s:SolidColor color="0x000000" alpha=".9"/>
</s:fill>

<s:filters>
<s:DropShadowFilter angle="90" color="0x999999"
distance="3"/>

</s:filters>
</s:Rect>

<s:Label id="labelDisplay" text="{data}"
horizontalCenter="0" verticalCenter="1"

left="5" right="5" top="5" bottom="5"
textAlign="center" verticalAlign="middle"

fontWeight="normal" color="white" fontSize="11">
</s:Label>

</s:DataRenderer>
</fx:Component>

</fx:Declarations>
 

<!--- Defines the skin class for the VSliderSkin's track. The
default skin class is VSliderTrackSkin. -->

<s:Button id="track" left="0" right="0" top="0" bottom="0"
minHeight="33" height="100"
skinClass="spark.skins.spark.VSliderTrackSkin" />

<!--- Defines the skin class for the VSliderSkin's thumb. The
default skin class is VSliderThumbSkin. -->

<s:Button id="thumb" left="0" right="0" width="11" height="11"
/>

</s:SparkSkin>