Removing the thumb from an MX HSlider control in Flex

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>

3 thoughts on “Removing the thumb from an MX HSlider control in Flex

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

Comments are closed.