Creating a custom thumb skin on an MX HSlider control in Flex 4

In a previous example, “Changing a slider control’s thumb skin”, we saw how you could customize a slider control (HSlider or VSlider) and use your own custom embedded image instead of the default triangle thumb skin.

The following example shows how you can create a custom thumb skin on an MX HSlider control in Flex 4 by setting the thumbSkin style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/13/creating-a-custom-thumb-skin-on-an-mx-hslider-control-in-flex-4/ -->
<s:Application name="MX_HSlider_thumbSkin_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">
 
    <mx:HSlider id="hSl"
            thumbSkin="skins.CustomSliderThumbSkin"
            showTrackHighlight="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

[HaloSparkSkins]

And the custom MX HSlider control thumb skin, skins/CustomSliderThumbSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/13/creating-a-custom-thumb-skin-on-an-mx-hslider-control-in-flex-4/ -->
<s:SparkSkin name="CustomSliderThumbSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Script>
        <![CDATA[
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <s:BitmapImage source="@Embed('skins/accept.png')" />
 
</s:SparkSkin>

[GoogleAdsWide]

View source is enabled in the following example.

[Famfamfam]

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

2 thoughts on “Creating a custom thumb skin on an MX HSlider control in Flex 4

  1. Hi,
    I want to show a triangular thumb for mx:VSlider in flex 4. The skin class which i written for mx:HSlider is showing fine, but the skin class written for mx:VSlider is not showing properly triangular button is not aligning propely.
    Can you please help me.
    Code:
    Skin component:

    [HostComponent(“spark.components.Button”)]

    In style sheet:
    mx|VSlider
    {
    accentColor:#08A5E1;
    thumbSkin: ClassReference(“com.skins.VSliderThumbSkin”);
    }

Comments are closed.