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:

Download this code

Related Tags for Slider in Flex4: