Setting the thumb offset on an MX HSlider control in Flex

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>

One thought on “Setting the thumb offset on an MX HSlider control in Flex

Comments are closed.