Home Tutorial Flex Flex4 Components Slider in Flex4

 
 

Share on Google+Share on Google+
Slider in Flex4
Posted on: May 12, 2010 at 12:00 AM
Advertisement
Flex4 Slider control is also called a Spark Slider control. You can select a value by moving a slider thumb between two end points of the Slider track. There are two types of Slider control.

Slider control in Flex4:

Flex4 Slider control is also called a Spark Slider control. You can select a value by moving a slider thumb between two end points of the Slider track. There are two types of Slider control. First is VSlider control and second is HSlider control which
are used for vertical and horizontal sliding. When we click a slider thumb a data tip appears which show the current value of the Slider control. You can show the current value of the slider by using the showDataTip property. By default the minimum value is 0 and maximum value of the Slider control is 100 respectively. The current value depends on the minimum and maximum value of the control. The tag of VSlider and HSlider control are <s:VSlider>, <s:HSlider> respectively.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application 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:Panel title="Slider control Example" height="224" width="344">

<s:VGroup x="21" y="41">

<s:Label text="Height:"/>

<s:VSlider id="vslider1" minimum="10" maximum="110" value="50" liveDragging="true"/>

</s:VGroup>

<s:Group left="102" top="46">

<s:Ellipse id="rect" width="{hslider2.value}" height="{vslider1.value}">

<s:fill>

<s:LinearGradient rotation="45">

<s:GradientEntry color="0x5098f0" />

<s:GradientEntry color="0x7a1a04" />

<s:GradientEntry color="0xfe80a4" />

</s:LinearGradient>

</s:fill>

</s:Ellipse>

</s:Group>

<s:HGroup verticalAlign="middle" width="258">

</s:HGroup>

<s:HSlider id="hslider2" minimum="10" maximum="110" value="60" liveDragging="true" x="134" y="11"/>

<s:Label text="Width:" x="87" y="11"/>

</s:Panel>

</s:Application>

In this example you can see how we can use a Slider control in Flex4.

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Advertisement

Related Tags for Slider in Flex4:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: May 12, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com