Removing the thumb from an MX HSlider control in Flex

By Peter deHaan On December 18, 2009 · 3 Comments

In a previous example, “Changing a slider control’s thumb skin”, we saw how you could specify a custom embedded image instead of the default HSlider/VSlider thumb skin by setting the thumbSkin style.

In the following example shows how you can remove the thumb altogether by setting the thumbSkin style to null.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/12/18/removing-the-thumb-from-an-mx-hslider-control-in-flex/ -->
<mx:Application name="Halo_HSlider_thumbSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:HSlider id="sldr"
            value="7"
            showTrackHighlight="true"
            thumbSkin="{null}" />
 
</mx:Application>

You can also set the thumbSkin style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/12/18/removing-the-thumb-from-an-mx-hslider-control-in-flex/ -->
<mx:Application name="Halo_HSlider_thumbSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        HSlider {
            thumbSkin: ClassReference(null);
            showTrackHighlight: true;
        }
    </mx:Style>
 
    <mx:HSlider id="sldr"
            value="7" />
 
</mx:Application>

Or you can set the thumbSkin style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/12/18/removing-the-thumb-from-an-mx-hslider-control-in-flex/ -->
<mx:Application name="Halo_HSlider_thumbSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function init():void {
                sldr.setStyle("thumbSkin", null);
                sldr.setStyle("showTrackHighlight", true);
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="hide thumb skin"
                click="init();" />
    </mx:ApplicationControlBar>
 
    <mx:HSlider id="sldr"
            value="7" />
 
</mx:Application>

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

3 Responses to Removing the thumb from an MX HSlider control in Flex

Francisco says:

December 26, 2009 at 4:45 pm

Buen aporte gracias
Roger says:

January 8, 2010 at 2:03 pm

Exactly what I was looking for, thanks!!
Amit Deshpande says:

August 28, 2010 at 9:50 am

I want make vslider in flex, when we assing slider value that time slider thamb should be move slovely .