Flex VSlider Control
In this tutorial we have illustrate how to create VSlider and how use it.
In this tutorial we have illustrate how to create VSlider and how use it.Slider in Flex:-
If user want to select a value between two end points by moving slider thumb. These point are on the slider track. You want to access the current value of the slider is find by the current location of the slider thumb between slider end points. In this example you can see how to create a Vslider in flex and how to access these current value. By default the minimum value for the slider is 0 and the maximum value for the slider is 10.you can set the minimum and maximum value for these Vslider.
When you want to vertical slider the use Vslider control in flex. we can create Vslider in mxml by using <mx:Vslider>tag.
Example:-
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.sliderClasses.Slider;
import mx.events.SliderEvent;
import mx.controls.Alert;
public function sliderValue(event:SliderEvent):void{
var slidervalue:Slider = Slider(event.currentTarget);
mytext.text = String(slidervalue.value);
}
public function DataTip(value:String):String{
return "Vslider value is "+ String(value);
}
]]>
</mx:Script>
<mx:Panel width="210" height="250" title="Vslider Example">
<mx:HBox>
<mx:VSlider id="vslider"
tickInterval="10"
snapInterval="10"
labels="['0','100']"
showDataTip="true"
liveDragging="true"
maximum="100"
change="sliderValue(event);"
dataTipFormatFunction="DataTip"/>
</mx:HBox>
<mx:HBox>
<mx:Text text="Vslider Value Without Event"/>
<mx:Text text="{vslider.value}"/>
</mx:HBox>
<mx:HBox>
<mx:Text text="Vslider Value With Event"/>
<mx:Text id="mytext"/>
</mx:HBox>
</mx:Panel>
</mx:Application>
User can set the properties for Vslider. Some properties are set in this example for example tickInterval, these property set the tick mark for the Vslider and set the interval between the tick mark. The user can set the property for selection that is snapInterval which is use to select the value from the slider that is 0, 25, 50 etc. user can set the liveDragging property to give the live sliding process and use the property for Data tip is showDataTip is true. showDataTip property is by default is true. You can also see how to set a user define data tip. But the main property of the slider is level that is display the start and end point for the slider. We can give these value in the level.
Output:-
In this example, we can use slider events. for example SliderEvent used to find the current value for the Vslider on change.
