Flex Examples » Slider 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 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 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 Setting the label offset on an HSlider control in Flex http://blog.flexexamples.com/2008/12/26/setting-the-label-offset-on-an-hslider-control-in-flex/ http://blog.flexexamples.com/2008/12/26/setting-the-label-offset-on-an-hslider-control-in-flex/#comments Sat, 27 Dec 2008 07:57:57 +0000 Peter deHaan http://blog.flexexamples.com/2008/12/26/setting-the-label-offset-on-an-hslider-control-in-flex/ The following example shows how you can set the label offset on a Flex HSlider 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-an-hslider-control-in-flex/ --> <mx:Application name="HSlider_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 HSlider 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-an-hslider-control-in-flex/ -->
<mx:Application name="HSlider_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:HSlider 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-an-hslider-control-in-flex/ -->
<mx:Application name="HSlider_labelOffset_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

    <mx:HSlider 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-an-hslider-control-in-flex/ -->
<mx:Application name="HSlider_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:HSlider id="sl"
            labels="[0,5,10]"
            tickInterval="1" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/12/26/setting-the-label-offset-on-an-hslider-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 Setting the tick thickness on a Slider control in Flex http://blog.flexexamples.com/2008/05/06/setting-the-tick-thickness-on-a-slider-control-in-flex/ http://blog.flexexamples.com/2008/05/06/setting-the-tick-thickness-on-a-slider-control-in-flex/#comments Wed, 07 May 2008 06:52:39 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/06/setting-the-tick-thickness-on-a-slider-control-in-flex/ The following example shows how you can set the thickness of a tick on a Flex HSlider control by setting the tickThickness style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/06/setting-the-tick-thickness-on-a-slider-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Form> <mx:FormItem label="tickThickness:"> <mx:HSlider id="slider" minimum="1" maximum="4" liveDragging="true" snapInterval="1" tickInterval="1" tickThickness="{slider.value}" [...]]]> The following example shows how you can set the thickness of a tick on a Flex HSlider control by setting the tickThickness style.

Full code after the jump.

View MXML

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

    <mx:Form>
        <mx:FormItem label="tickThickness:">
            <mx:HSlider id="slider"
                    minimum="1"
                    maximum="4"
                    liveDragging="true"
                    snapInterval="1"
                    tickInterval="1"
                    tickThickness="{slider.value}"  />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/05/06/setting-the-tick-thickness-on-a-slider-control-in-flex/feed/ 2 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