Flex Examples » HSlider http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the thumb offset on an MX HSlider control in Flex http://blog.flexexamples.com/2010/05/27/setting-the-thumb-offset-on-an-mx-hslider-control-in-flex/ http://blog.flexexamples.com/2010/05/27/setting-the-thumb-offset-on-an-mx-hslider-control-in-flex/#comments Thu, 27 May 2010 19:36:15 +0000 Peter deHaan http://blog.flexexamples.com/?p=3143 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" [...]]]> 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>
 
]]> http://blog.flexexamples.com/2010/05/27/setting-the-thumb-offset-on-an-mx-hslider-control-in-flex/feed/ 1 Creating a custom track highlight skin on an MX HSlider control in Flex 4 http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-highlight-skin-on-an-mx-hslider-control-in-flex-4/ http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-highlight-skin-on-an-mx-hslider-control-in-flex-4/#comments Wed, 14 Apr 2010 14:02:17 +0000 Peter deHaan http://blog.flexexamples.com/?p=2747 The following example shows how you can create a custom track highlight skin on an MX HSlider control in Flex 4 by setting the trackHighlightSkin style and the Boolean showTrackHighlight style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-highlight-skin-on-an-mx-hslider-control-in-flex-4/ --> <s:Application name="MX_HSlider_trackHighlightSkin_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:controlBarContent> <s:CheckBox id="chckBx" label="showTrackHighlight" selected="true" /> </s:controlBarContent>   <mx:HSlider id="hSl" value="5" trackHighlightSkin="skins.CustomSliderTrackHighlightSkin" [...]]]> The following example shows how you can create a custom track highlight skin on an MX HSlider control in Flex 4 by setting the trackHighlightSkin style and the Boolean showTrackHighlight style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-highlight-skin-on-an-mx-hslider-control-in-flex-4/ -->
<s:Application name="MX_HSlider_trackHighlightSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:CheckBox id="chckBx"
                label="showTrackHighlight"
                selected="true" />
    </s:controlBarContent>
 
    <mx:HSlider id="hSl"
            value="5"
            trackHighlightSkin="skins.CustomSliderTrackHighlightSkin"
            showTrackHighlight="{chckBx.selected}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

And the custom MX HSlider track highlight skin, skins/CustomSliderTrackHighlightSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-highlight-skin-on-an-mx-hslider-control-in-flex-4/ -->
<s:Skin name="CustomSkiderTrackHightlightSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        width="200" height="11"
        disabledAlpha="0.5">
 
    <s:Rect left="0" right="0" top="2" height="4" radiusX="2">
        <s:fill>
            <s:BitmapFill source="@Embed('assets/pattern_143.gif')" fillMode="repeat" alpha="0.35" />
        </s:fill>
    </s:Rect>
 
</s:Skin>

View source is enabled in the following example.

Background image pattern copyright of Squidfingers.com.

You can also set the showTrackHighlight and trackHighlightSkin styles 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/04/14/creating-a-custom-track-highlight-skin-on-an-mx-hslider-control-in-flex-4/ -->
<s:Application name="MX_HSlider_trackHighlightSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        mx|HSlider {
            showTrackHighlight: true;
            trackHighlightSkin: ClassReference("skins.CustomSliderTrackHighlightSkin");
        }
    </fx:Style>
 
    <mx:HSlider id="hSl"
            value="5"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-highlight-skin-on-an-mx-hslider-control-in-flex-4/feed/ 6 Setting the accent color on an MX HSlider control in Flex 4 http://blog.flexexamples.com/2010/04/13/setting-the-accent-color-on-an-mx-hslider-control-in-flex-4/ http://blog.flexexamples.com/2010/04/13/setting-the-accent-color-on-an-mx-hslider-control-in-flex-4/#comments Wed, 14 Apr 2010 06:18:42 +0000 Peter deHaan http://blog.flexexamples.com/?p=2744 The following example shows how you can set the track highlight accent color on an MX HSlider control in Flex 4 by setting the accentColor style using MXML, CSS, or ActionScript.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/13/setting-the-accent-color-on-an-mx-hslider-control-in-flex-4/ --> <s:Application name="MX_HSlider_accentColor_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:controlBarContent> <mx:Form> <mx:FormItem label="accentColor:"> <mx:ColorPicker id="clrPckr" selectedColor="#0066FF" /> </mx:FormItem> </mx:Form> </s:controlBarContent>   [...]]]> The following example shows how you can set the track highlight accent color on an MX HSlider control in Flex 4 by setting the accentColor style using MXML, CSS, or ActionScript.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/13/setting-the-accent-color-on-an-mx-hslider-control-in-flex-4/ -->
<s:Application name="MX_HSlider_accentColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="accentColor:">
                <mx:ColorPicker id="clrPckr" selectedColor="#0066FF" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <mx:HSlider id="hSl"
            value="5"
            accentColor="{clrPckr.selectedColor}"
            showTrackHighlight="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/13/setting-the-accent-color-on-an-mx-hslider-control-in-flex-4/ -->
<s:Application name="MX_HSlider_accentColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        mx|HSlider {
            accentColor: haloOrange;
        }
    </fx:Style>
 
    <mx:HSlider id="hSl"
            value="5"
            showTrackHighlight="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/13/setting-the-accent-color-on-an-mx-hslider-control-in-flex-4/ -->
<s:Application name="MX_HSlider_accentColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="accentColor:">
                <mx:ColorPicker id="clrPckr"
                        selectedColor="#0066FF"
                        change="clrPckr_changeHandler(event)" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function clrPckr_changeHandler(evt:ColorPickerEvent):void {
                hSl.setStyle("accentColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <mx:HSlider id="hSl"
            value="5"
            showTrackHighlight="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/04/13/setting-the-accent-color-on-an-mx-hslider-control-in-flex-4/feed/ 0 Creating a custom thumb skin on an MX HSlider control in Flex 4 http://blog.flexexamples.com/2010/04/13/creating-a-custom-thumb-skin-on-an-mx-hslider-control-in-flex-4/ http://blog.flexexamples.com/2010/04/13/creating-a-custom-thumb-skin-on-an-mx-hslider-control-in-flex-4/#comments Wed, 14 Apr 2010 04:58:01 +0000 Peter deHaan http://blog.flexexamples.com/?p=2740 In a previous example, “Changing a slider control’s thumb skin”, we saw how you could customize a slider control (HSlider or VSlider) and use your own custom embedded image instead of the default triangle thumb skin.

The following example shows how you can create a custom thumb skin on an MX HSlider control in [...]]]> In a previous example, “Changing a slider control’s thumb skin”, we saw how you could customize a slider control (HSlider or VSlider) and use your own custom embedded image instead of the default triangle thumb skin.

The following example shows how you can create a custom thumb skin on an MX HSlider control in Flex 4 by setting the thumbSkin style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/13/creating-a-custom-thumb-skin-on-an-mx-hslider-control-in-flex-4/ -->
<s:Application name="MX_HSlider_thumbSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <mx:HSlider id="hSl"
            thumbSkin="skins.CustomSliderThumbSkin"
            showTrackHighlight="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

And the custom MX HSlider control thumb skin, skins/CustomSliderThumbSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/13/creating-a-custom-thumb-skin-on-an-mx-hslider-control-in-flex-4/ -->
<s:SparkSkin name="CustomSliderThumbSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Script>
        <![CDATA[
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <s:BitmapImage source="@Embed('skins/accept.png')" />
 
</s:SparkSkin>

View source is enabled in the following example.

Icons copyright of famfamfam.com.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/04/13/creating-a-custom-thumb-skin-on-an-mx-hslider-control-in-flex-4/feed/ 2 Styling individual thumbs in the MX HSlider control in Flex http://blog.flexexamples.com/2010/01/07/styling-individual-thumbs-in-the-mx-hslider-control-in-flex/ http://blog.flexexamples.com/2010/01/07/styling-individual-thumbs-in-the-mx-hslider-control-in-flex/#comments Thu, 07 Jan 2010 21:03:22 +0000 Peter deHaan http://blog.flexexamples.com/?p=2282 The following example shows how you can apply styles to individual thumbs in a MX HSlider control in Flex by calling the getThumbAt() method to get a specific thumb and then calling the setStyle() method to apply the styles.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/01/07/styling-individual-thumbs-in-the-mx-hslider-control-in-flex/ --> <mx:Application name="HSlider_getThumbAt_setStyle_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" [...]]]> The following example shows how you can apply styles to individual thumbs in a MX HSlider control in Flex by calling the getThumbAt() method to get a specific thumb and then calling the setStyle() method to apply the styles.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/07/styling-individual-thumbs-in-the-mx-hslider-control-in-flex/ -->
<mx:Application name="HSlider_getThumbAt_setStyle_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            protected function sl_creationCompleteHandler():void {
                sl.getThumbAt(0).setStyle("fillColors", ["red", "red"]);
                sl.getThumbAt(0).setStyle("themeColor", "red");
                sl.getThumbAt(1).setStyle("fillColors", ["haloGreen", "haloGreen"]);
                sl.getThumbAt(1).setStyle("themeColor", "haloGreen");
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
    </mx:ApplicationControlBar>
 
    <mx:HSlider id="sl"
            thumbCount="2"
            values="[2,8]"
            showTrackHighlight="true"
            allowThumbOverlap="true"
            creationComplete="sl_creationCompleteHandler();" />
 
</mx:Application>

The following example shows how you can do the same thing in Flex 4 by setting the chromeColor style instead of the themeColor and fillColors styles.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/07/styling-individual-thumbs-in-the-mx-hslider-control-in-flex/ -->
<s:Application name="MX_HSlider_getThumbAt_setStyle_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            private function sl_creationCompleteHandler():void {
                sl.getThumbAt(0).setStyle("chromeColor", "red");
                sl.getThumbAt(1).setStyle("chromeColor", "haloGreen"); 
            }
        ]]>
    </fx:Script>
 
    <mx:HSlider id="sl"
            thumbCount="2"
            values="[2,8]"
            showTrackHighlight="true"
            allowThumbOverlap="true"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="sl_creationCompleteHandler();" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/01/07/styling-individual-thumbs-in-the-mx-hslider-control-in-flex/feed/ 0 Removing the thumb from an MX HSlider control in Flex http://blog.flexexamples.com/2009/12/18/removing-the-thumb-from-an-mx-hslider-control-in-flex/ http://blog.flexexamples.com/2009/12/18/removing-the-thumb-from-an-mx-hslider-control-in-flex/#comments Sat, 19 Dec 2009 00:52:40 +0000 Peter deHaan http://blog.flexexamples.com/?p=2267 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 [...]]]> 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>
 
]]> http://blog.flexexamples.com/2009/12/18/removing-the-thumb-from-an-mx-hslider-control-in-flex/feed/ 3 Customizing the track highlight skin on an MX HSlider control in Flex 4 http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/ http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/#comments Fri, 25 Sep 2009 06:59:00 +0000 Peter deHaan http://blog.flexexamples.com/?p=1914 The following example shows how you can customize the track highlight skin on a Halo/MX HSlider control in Flex 4 by setting the showTrackHighlight and trackHighlightSkin styles.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/ --> <s:Application name="Halo_HSlider_trackHighlightSkin_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:controlBarContent> <s:CheckBox id="chckBx" label="showTrackHighlight" selected="true" /> </s:controlBarContent>   <mx:HSlider id="sldr" showTrackHighlight="{chckBx.selected}" trackHighlightSkin="skins.CustomSliderTrackHighlightSkin" value="7" horizontalCenter="0" verticalCenter="0" /> [...]]]> The following example shows how you can customize the track highlight skin on a Halo/MX HSlider control in Flex 4 by setting the showTrackHighlight and trackHighlightSkin styles.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/ -->
<s:Application name="Halo_HSlider_trackHighlightSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:CheckBox id="chckBx"
                label="showTrackHighlight"
                selected="true" />
    </s:controlBarContent>
 
    <mx:HSlider id="sldr"
            showTrackHighlight="{chckBx.selected}"
            trackHighlightSkin="skins.CustomSliderTrackHighlightSkin"
            value="7"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom track highlight skin, skins/CustomSliderTrackHighlightSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/ -->
<s:Skin name="CustomSliderTrackHighlightSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        height="11" width="200"
        disabledAlpha="0.5">
 
    <s:Rect left="0" right="0" top="2" height="4">
        <s:fill>
            <s:SolidColor color="red" alpha="0.35" />
        </s:fill>
    </s:Rect>
 
</s:Skin>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.


View source is enabled in the following example.

You can also set the showTrackHighlight and trackHighlightSkin styles 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/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/ -->
<s:Application name="Halo_HSlider_trackHighlightSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|HSlider {
            showTrackHighlight: true;
            trackHighlightSkin: ClassReference("skins.CustomSliderTrackHighlightSkin");
        }
    </fx:Style>
 
    <mx:HSlider id="sldr"
            value="7"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or you can also set the showTrackHighlight and trackHighlightSkin styles using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/ -->
<s:Application name="Halo_HSlider_trackHighlightSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Set track highlight skin"
                click="btn_click(event);" />
        <s:CheckBox id="chckBx"
                label="showTrackHighlight"
                selected="true"
                change="chckBx_change(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import skins.*;
 
            protected function btn_click(evt:MouseEvent):void {
                sldr.setStyle("showTrackHighlight", chckBx.selected);
                sldr.setStyle("trackHighlightSkin", CustomSliderTrackHighlightSkin);
            }
 
            protected function chckBx_change(evt:Event):void {
                sldr.setStyle("showTrackHighlight", chckBx.selected);
            }
        ]]>
    </fx:Script>
 
    <mx:HSlider id="sldr"
            value="7"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or, if you wanted something a bit more original, you could apply a repeating BitmapFill on the CustomSliderTrackHighlightSkin instead of a solid color, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/ -->
<s:Skin name="CustomSliderTrackHighlightSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        height="11" width="200"
        disabledAlpha="0.5">
 
    <s:Rect left="0" right="0" top="2" height="4">
        <s:fill>
            <s:BitmapFill source="@Embed('pattern_149.gif')" fillMode="repeat" />
        </s:fill>
    </s:Rect>
 
</s:Skin>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/09/24/customizing-the-track-highlight-skin-on-a-halo-hslider-control-in-flex-4/feed/ 1 Setting the track margin on a Halo Slider control in Flex http://blog.flexexamples.com/2009/06/27/setting-the-track-margin-on-a-halo-slider-control-in-flex/ http://blog.flexexamples.com/2009/06/27/setting-the-track-margin-on-a-halo-slider-control-in-flex/#comments Sun, 28 Jun 2009 07:59:01 +0000 Peter deHaan http://blog.flexexamples.com/?p=2175 The following example shows how you can set the track margin on a Halo/MX Slider control in Flex 3 by setting the trackMargin style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/27/setting-the-track-margin-on-a-halo-slider-control-in-flex/ --> <mx:Application name="HSlider_trackMargin_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="trackMargin:"> <mx:HSlider id="sl" liveDragging="true" maximum="100" /> </mx:FormItem> [...]]]> The following example shows how you can set the track margin on a Halo/MX Slider control in Flex 3 by setting the trackMargin style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/27/setting-the-track-margin-on-a-halo-slider-control-in-flex/ -->
<mx:Application name="HSlider_trackMargin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="trackMargin:">
                <mx:HSlider id="sl"
                        liveDragging="true"
                        maximum="100" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Canvas backgroundColor="haloSilver">
        <mx:HSlider id="sldr"
                trackMargin="{sl.value}"
                labels="[0,5,10]"
                tickInterval="5" />
    </mx:Canvas>
 
</mx:Application>

You can also set the trackMargin 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/06/27/setting-the-track-margin-on-a-halo-slider-control-in-flex/ -->
<mx:Application name="HSlider_trackMargin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        HSlider {
            trackMargin: 100;
        }
    </mx:Style>
 
    <mx:Canvas backgroundColor="haloSilver">
        <mx:HSlider id="sldr"
                labels="[0,5,10]"
                tickInterval="5" />
    </mx:Canvas>
 
</mx:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/27/setting-the-track-margin-on-a-halo-slider-control-in-flex/ -->
<mx:Application name="HSlider_trackMargin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
 
            protected function sl_changeHandler(evt:SliderEvent):void {
                sldr.setStyle("trackMargin", evt.value);
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="trackMargin:">
                <mx:HSlider id="sl"
                        liveDragging="true"
                        maximum="100"
                        change="sl_changeHandler(event)"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Canvas backgroundColor="haloSilver">
        <mx:HSlider id="sldr"
                labels="[0,5,10]"
                tickInterval="5" />
    </mx:Canvas>
 
</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/27/setting-the-track-margin-on-a-halo-slider-control-in-flex/ -->
<mx:Application name="HSlider_trackMargin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Canvas;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.HSlider;
            import mx.events.SliderEvent;
 
            protected const appControlBar:ApplicationControlBar = new ApplicationControlBar();
            protected const sldr:HSlider = new HSlider();
 
            protected function init():void {
                const sl:HSlider = new HSlider();
                sl.liveDragging = true;
                sl.maximum = 100;
                sl.addEventListener(SliderEvent.CHANGE, sl_changeHandler);
 
                const formItem:FormItem = new FormItem();
                formItem.label = "trackMargin:";
                formItem.addChild(sl);
 
                const form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);
 
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);
 
                sldr.labels = [0, 5, 10];
                sldr.tickInterval = 5;
 
                const can:Canvas = new Canvas();
                can.setStyle("backgroundColor", "haloSilver");
                can.addChild(sldr);
                addChild(can);
            }
 
            protected function sl_changeHandler(evt:SliderEvent):void {
                sldr.setStyle("trackMargin", evt.value);
            }
        ]]>
    </mx:Script>
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2009/06/27/setting-the-track-margin-on-a-halo-slider-control-in-flex/feed/ 0 Toggling data tips on the HSlider control in Flex http://blog.flexexamples.com/2008/12/28/toggling-data-tips-on-the-hslider-control-in-flex/ http://blog.flexexamples.com/2008/12/28/toggling-data-tips-on-the-hslider-control-in-flex/#comments Mon, 29 Dec 2008 06:10:33 +0000 Peter deHaan http://blog.flexexamples.com/2008/12/28/toggling-data-tips-on-the-hslider-control-in-flex/ The following example shows how you can toggle data tips on the Flex HSlider control by setting the Boolean showDataTips property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/12/28/toggling-data-tips-on-the-hslider-control-in-flex/ --> <mx:Application name="HSlider_showDataTip_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="showDataTip:"> <mx:CheckBox id="checkBox" selected="true" /> </mx:FormItem> </mx:Form> [...]]]> The following example shows how you can toggle data tips on the Flex HSlider control by setting the Boolean showDataTips property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/28/toggling-data-tips-on-the-hslider-control-in-flex/ -->
<mx:Application name="HSlider_showDataTip_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="showDataTip:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HSlider id="slider"
            showDataTip="{checkBox.selected}"
            liveDragging="true" />

</mx:Application>

View source is enabled in the following example.

You can also set the showDataTip property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/28/toggling-data-tips-on-the-hslider-control-in-flex/ -->
<mx:Application name="HSlider_showDataTip_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                slider.showDataTip = checkBox.selected;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="showDataTip:">
                <mx:CheckBox id="checkBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HSlider id="slider"
            showDataTip="{checkBox.selected}"
            liveDragging="true" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/12/28/toggling-data-tips-on-the-hslider-control-in-flex/feed/ 5 Preventing a user from clicking the track on an HSlider control in Flex http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/ http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/#comments Sun, 28 Dec 2008 07:52:31 +0000 Peter deHaan http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/ The following example shows how you can prevent a user from clicking on the track of a Flex HSlider control by setting the Boolean allowTrackClick property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/ --> <mx:Application name="HSlider_allowTrackClick_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="allowTrackClick:"> [...]]]> The following example shows how you can prevent a user from clicking on the track of a Flex HSlider control by setting the Boolean allowTrackClick property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/ -->
<mx:Application name="HSlider_allowTrackClick_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="allowTrackClick:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HSlider id="slider"
            allowTrackClick="{checkBox.selected}" />
 
</mx:Application>

View source is enabled in the following example.

You can also set the allowTrackClick property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/ -->
<mx:Application name="HSlider_allowTrackClick_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                slider.allowTrackClick = checkBox.selected;
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="allowTrackClick:">
                <mx:CheckBox id="checkBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HSlider id="slider" />
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2008/12/27/preventing-a-user-from-clicking-the-track-on-an-hslider-control-in-flex/feed/ 5