Flex Examples » VSlider 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 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 label offset on a VSlider control in Flex http://blog.flexexamples.com/2008/12/26/setting-the-label-offset-on-a-vslider-control-in-flex/ http://blog.flexexamples.com/2008/12/26/setting-the-label-offset-on-a-vslider-control-in-flex/#comments Sat, 27 Dec 2008 07:58:06 +0000 Peter deHaan http://blog.flexexamples.com/2008/12/26/setting-the-label-offset-on-a-vslider-control-in-flex/ The following example shows how you can set the label offset on a Flex VSlider control by setting the labelOffset style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/12/26/setting-the-label-offset-on-a-vslider-control-in-flex/ --> <mx:Application name="VSlider_labelOffset_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="labelOffset:"> <mx:HSlider id="slider" minimum="-20" maximum="60" value="-10" snapInterval="1" [...]]]> The following example shows how you can set the label offset on a Flex VSlider control by setting the labelOffset style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/26/setting-the-label-offset-on-a-vslider-control-in-flex/ -->
<mx:Application name="VSlider_labelOffset_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="labelOffset:">
                <mx:HSlider id="slider"
                        minimum="-20"
                        maximum="60"
                        value="-10"
                        snapInterval="1"
                        tickInterval="5"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VSlider id="sl"
            labels="[0,5,10]"
            labelOffset="{slider.value}"
            tickInterval="1" />

</mx:Application>

View source is enabled in the following example.

You can also set the labelOffset style in an external .CSS file or <mx:Style/> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/26/setting-the-label-offset-on-a-vslider-control-in-flex/ -->
<mx:Application name="VSlider_labelOffset_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        HSlider {
            labelOffset: 20;
        }
    </mx:Style>

    <mx:VSlider id="sl"
            labels="[0,5,10]"
            tickInterval="1" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/26/setting-the-label-offset-on-a-vslider-control-in-flex/ -->
<mx:Application name="VSlider_labelOffset_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                sl.setStyle("labelOffset", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelOffset:">
                <mx:HSlider id="slider"
                        minimum="-20"
                        maximum="60"
                        value="-10"
                        snapInterval="1"
                        tickInterval="5"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VSlider id="sl"
            labels="[0,5,10]"
            tickInterval="1" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/12/26/setting-the-label-offset-on-a-vslider-control-in-flex/feed/ 0 Using an embedded font with the Slider controls in Flex http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-in-flex/ http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-in-flex/#comments Thu, 05 Jun 2008 06:39:40 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-in-flex/ The following example shows how you can use an embedded font with the Flex HSlider control by setting the fontFamily and labelStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face { src: local("Base 02"); fontFamily: EmbeddedBase02; } .sliderLabelStyleName { [...]]]> The following example shows how you can use an embedded font with the Flex HSlider control by setting the fontFamily and labelStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
        }

        .sliderLabelStyleName {
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>

    <mx:HSlider id="slider"
            minimum="0"
            maximum="20"
            value="0"
            labels="[0,5,10,15,20]"
            snapInterval="1"
            tickInterval="1"
            liveDragging="true"
            labelStyleName="sliderLabelStyleName"
            width="200" />

</mx:Application>

View source is enabled in the following example.

You can also set the labelStyleName and fontFamily styles using an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
        }

        Slider {
            labelStyleName: sliderLabelStyleName;
        }

        .sliderLabelStyleName {
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>

    <mx:HSlider id="slider"
            minimum="0"
            maximum="20"
            value="0"
            labels="[0,5,10,15,20]"
            snapInterval="1"
            tickInterval="1"
            liveDragging="true"
            width="200" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.HSlider;

            [Embed(systemFont="Base 02",
                    fontName="EmbeddedBase02",
                    advancedAntiAliasing="true",
                    mimeType="application/x-font")]
            private var EmbeddedBase02:Class;

            private var slider:HSlider;

            private function init():void {
                var labelStyleName:CSSStyleDeclaration = new CSSStyleDeclaration();
                labelStyleName.setStyle("fontFamily", "EmbeddedBase02");

                StyleManager.setStyleDeclaration(".sliderLabelStyleName", labelStyleName, true);

                slider = new HSlider();
                slider.minimum = 0;
                slider.maximum = 20;
                slider.value = 0;
                slider.labels = [0, 5, 10, 15, 20];
                slider.snapInterval = 1;
                slider.tickInterval = 1;
                slider.setStyle("labelStyleName", "sliderLabelStyleName");
                slider.width = 200;
                addChild(slider);
            }
        ]]>
    </mx:Script>

</mx:Application>

Base 02 font by www.stereo-type.net.

 
]]> http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-in-flex/feed/ 0 Setting the tick length on a Slider control in Flex http://blog.flexexamples.com/2008/06/04/setting-the-tick-length-on-a-slider-control-in-flex/ http://blog.flexexamples.com/2008/06/04/setting-the-tick-length-on-a-slider-control-in-flex/#comments Thu, 05 Jun 2008 05:57:17 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/04/setting-the-tick-length-on-a-slider-control-in-flex/ In a previous example, “Setting the tick thickness on a Slider control in Flex”, we saw how to change the thickness of a tick on a Flex HSlider control by setting the tickThickness style.

The following example shows how you can set the length of a tick on a Flex HSlider control by setting [...]]]> In a previous example, “Setting the tick thickness on a Slider control in Flex”, we saw how to change the thickness of a tick on a Flex HSlider control by setting the tickThickness style.

The following example shows how you can set the length of a tick on a Flex HSlider control by setting the tickLength style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/04/setting-the-tick-length-on-a-slider-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:HSlider id="slider"
            minimum="0"
            maximum="10"
            value="3"
            liveDragging="true"
            tickLength="{slider.value}"
            tickInterval="1" />

</mx:Application>

View source is enabled in the following example.

You can also set the tickLength style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/04/setting-the-tick-length-on-a-slider-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        HSlider {
            tickLength: 10;
        }
    </mx:Style>

    <mx:HSlider id="slider"
            minimum="0"
            maximum="10"
            value="3"
            liveDragging="true"
            tickInterval="1" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/04/setting-the-tick-length-on-a-slider-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                slider.setStyle("tickLength", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:HSlider id="slider"
            minimum="0"
            maximum="10"
            value="3"
            liveDragging="true"
            tickInterval="1"
            change="slider_change(event);" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/06/04/setting-the-tick-length-on-a-slider-control-in-flex/feed/ 0 Setting the data tip offset in a Slider control in Flex http://blog.flexexamples.com/2008/05/09/setting-the-data-tip-offset-in-a-slider-control-in-flex/ http://blog.flexexamples.com/2008/05/09/setting-the-data-tip-offset-in-a-slider-control-in-flex/#comments Sat, 10 May 2008 06:37:43 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/09/setting-the-data-tip-offset-in-a-slider-control-in-flex/ The following example shows how you can control the data tip offset in a Flex HSlider control by setting the dataTipOffset style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/09/setting-the-data-tip-offset-in-a-slider-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function init():void { slider.value = slider.getStyle("dataTipOffset"); } ]]> </mx:Script> [...]]]> The following example shows how you can control the data tip offset in a Flex HSlider control by setting the dataTipOffset style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/09/setting-the-data-tip-offset-in-a-slider-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                slider.value = slider.getStyle("dataTipOffset");
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="dataTipOffset:" direction="horizontal">
            <mx:HSlider id="slider"
                    minimum="-10"
                    maximum="30"
                    snapInterval="1"
                    tickInterval="5"
                    liveDragging="true"
                    dataTipOffset="{slider.value}"
                    dataTipPrecision="0"
                    showTrackHighlight="true"
                    initialize="init();" />
            <mx:Label text="{slider.value}" width="30" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

And due to popular demand, here is the “same” example, in ActionScript:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/09/setting-the-data-tip-offset-in-a-slider-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <comps:MySlider />

</mx:Application>

comps/MySlider.as

package comps {
    import mx.containers.Form;
    import mx.containers.FormItem;
    import mx.containers.FormItemDirection;
    import mx.controls.HSlider;
    import mx.controls.Label;
    import mx.events.SliderEvent;

    public class MySlider extends Form {
        public var slider:HSlider
        public var lbl:Label;
        public var formItem:FormItem;

        public function MySlider() {
            super();
            init();
        }

        private function init():void {
            slider = new HSlider();
            slider.minimum = -10;
            slider.maximum = 30;
            slider.value = slider.getStyle("dataTipOffset");
            slider.snapInterval = 1;
            slider.tickInterval = 5;
            slider.liveDragging = true;
            slider.setStyle("dataTipPrecision", 0);
            slider.setStyle("showTrackHighlight", true);
            slider.addEventListener(SliderEvent.CHANGE, slider_change);

            lbl = new Label();
            lbl.width = 30;

            formItem = new FormItem();
            formItem.label = "dataTipOffset:";
            formItem.direction = FormItemDirection.HORIZONTAL;
            formItem.addChild(slider);
            formItem.addChild(lbl);
            addChild(formItem);
        }

        private function slider_change(evt:SliderEvent):void {
            slider.setStyle("dataTipOffset", evt.value);
            lbl.text = evt.value.toString();
        }
    }
}

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/05/09/setting-the-data-tip-offset-in-a-slider-control-in-flex/feed/ 10 Customizing a slider control’s data tip http://blog.flexexamples.com/2007/11/03/customizing-a-slider-controls-data-tip/ http://blog.flexexamples.com/2007/11/03/customizing-a-slider-controls-data-tip/#comments Sat, 03 Nov 2007 07:47:06 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/03/customizing-a-slider-controls-data-tip/ The following example shows how you can customize a slider control’s data tip in Flex. This example uses an embedded font and a data tip with a negative data tip offset that overlaps the slider thumb.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/11/03/customizing-a-slider-controls-data-tip/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" [...]]]> The following example shows how you can customize a slider control’s data tip in Flex. This example uses an embedded font and a data tip with a negative data tip offset that overlaps the slider thumb.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/03/customizing-a-slider-controls-data-tip/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face{
            src: local("Arial");
            fontFamily: "ArialEmbedded";
            fontWeight: bold;
        }

        HSlider {
            dataTipOffset: -22;
            dataTipStyleName: "myDataTip";
        }

        .myDataTip {
            backgroundColor: black;
            color: white;
            fontWeight: bold;
            fontFamily: ArialEmbedded;
            fontSize: 16;
        }
    </mx:Style>

    <mx:HSlider id="slider" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/11/03/customizing-a-slider-controls-data-tip/feed/ 0 Programmatically positioning tick marks on a slider control http://blog.flexexamples.com/2007/11/03/programmatically-positioning-tick-marks-on-a-slider-control/ http://blog.flexexamples.com/2007/11/03/programmatically-positioning-tick-marks-on-a-slider-control/#comments Sat, 03 Nov 2007 07:23:51 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/03/programmatically-positioning-tick-marks-on-a-slider-control/ The following example shows how you can programmatically set tick positions on a Flex Slider control by setting the tickValues property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/11/03/programmatically-positioning-tick-marks-on-a-slider-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:HSlider id="slider" minimum="0" maximum="100" liveDragging="true" snapInterval="1" tickValues="[0,10,50,60,70,90,100]" dataTipPrecision="0" /> </mx:Application>

View [...]]]> The following example shows how you can programmatically set tick positions on a Flex Slider control by setting the tickValues property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/03/programmatically-positioning-tick-marks-on-a-slider-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:HSlider id="slider"
            minimum="0"
            maximum="100"
            liveDragging="true"
            snapInterval="1"
            tickValues="[0,10,50,60,70,90,100]"
            dataTipPrecision="0" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/11/03/programmatically-positioning-tick-marks-on-a-slider-control/feed/ 4 Toggling a Flex Slider control’s tickInterval property http://blog.flexexamples.com/2007/11/03/toggling-a-flex-slider-controls-tickinterval-property/ http://blog.flexexamples.com/2007/11/03/toggling-a-flex-slider-controls-tickinterval-property/#comments Sat, 03 Nov 2007 07:13:34 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/03/toggling-a-flex-slider-controls-tickinterval-property/ The following example shows how you can toggle a Flex Slider control’s tick marks so they are only visible while the user’s mouse cursor is over the HSlider/VSlider control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/11/03/toggling-a-flex-slider-controls-tickinterval-property/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.sliderClasses.Slider; private [...]]]> The following example shows how you can toggle a Flex Slider control’s tick marks so they are only visible while the user’s mouse cursor is over the HSlider/VSlider control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/03/toggling-a-flex-slider-controls-tickinterval-property/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.sliderClasses.Slider;

            private const TICK_INTERVAL:uint = 5;

            private function slider_rollOver(evt:MouseEvent):void {
                Slider(evt.currentTarget).tickInterval = TICK_INTERVAL;
            }

            private function slider_rollOut(evt:MouseEvent):void {
                Slider(evt.currentTarget).tickInterval = 0;
            }
        ]]>
    </mx:Script>

    <mx:HSlider id="slider"
            minimum="0"
            maximum="100"
            liveDragging="true"
            snapInterval="1"
            dataTipPrecision="0"
            rollOver="slider_rollOver(event);"
            rollOut="slider_rollOut(event);" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/11/03/toggling-a-flex-slider-controls-tickinterval-property/feed/ 0