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>
{ 2 comments… read them below or add one }
Buen aporte gracias
Exactly what I was looking for, thanks!!