The following example shows how you can adjust the vertical gap between the track and label in the Flex ProgressBar control by setting the verticalGap style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/05/setting-the-vertical-gap-between-the-track-and-label-in-the-progressbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function init():void {
slider.value = progressBar.getStyle("verticalGap");
}
private function progressBar_change(evt:SliderEvent):void {
progressBar.setStyle("verticalGap", evt.value);
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="verticalGap:">
<mx:HSlider id="slider"
minimum="0"
maximum="20"
value="3"
liveDragging="true"
snapInterval="1"
tickInterval="1"
change="progressBar_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:ProgressBar id="progressBar"
mode="manual"
trackColors="[red, red]"
barColor="green"
initialize="progressBar.setProgress(76, 100);" />
</mx:Application>
View source is enabled in the following example.
{ 2 comments… read them below or add one }
Did you can provide an example concerning to include several HSlider components inside a DataGrid. My main aim is build a Datagrid for evaluation my students. The first column is filled with the students name and in the second I would like to insert the exam scores using a HSlider. The datagrid should be similar to that:
Student_Name Score
Anne ——v—-
John —v——-
Amilcar ———v-
and so on…..
In this way I can perform efficient and visual comparations between my students.
thanks a lot.
Jorge,
Does this work for you? “Using a Slider control as a DataGrid column item renderer in Flex”
Peter