Flex Examples
The following example shows how you can set the thumb offset (distance between the slider thumb and track) on an MX HSlider control in Flex by setting the thumbOffset style.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/05/27/setting-the-thumb-offset-on-an-mx-hslider-control-in-flex/ --> <mx:Application name="MX_HSlider_thumbOffset_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form> <mx:FormItem label="thumbOffset:"> <mx:HSlider id="sl" minimum="-15" maximum="15" value="0" snapInterval="1" liveDragging="true" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:HSlider thumbOffset="{sl.value}" showTrackHighlight="true" /> </mx:Application>
You can also set the thumbOffset 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/2010/05/27/setting-the-thumb-offset-on-an-mx-hslider-control-in-flex/ --> <mx:Application name="MX_HSlider_thumbOffset_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> HSlider { thumbOffset: 15; } </mx:Style> <mx:HSlider showTrackHighlight="true" /> </mx:Application>
Or you can set the thumbOffset style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/05/27/setting-the-thumb-offset-on-an-mx-hslider-control-in-flex/ --> <mx:Application name="MX_HSlider_thumbOffset_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form> <mx:FormItem label="thumbOffset:"> <mx:HSlider id="sl" minimum="-15" maximum="15" value="0" snapInterval="1" liveDragging="true" change="sl_changeHandler(event);"/> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:Script> <![CDATA[ import mx.events.SliderEvent; protected function sl_changeHandler(evt:SliderEvent):void { sl2.setStyle("thumbOffset", evt.value); } ]]> </mx:Script> <mx:HSlider id="sl2" showTrackHighlight="true" /> </mx:Application>
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.
Share
Nice post.That’s what I was looking for.