HSlider的labels属性设置后,会自动显示label在相应的刻度范围。比如labels=[2000,2020],则在滑动条的左右两端分别显示2000,2020.现在需要在滑动的时候,让slider的值动态的显示出来,研究了半天自带的属性,无法实现,所以使用label和slider结合的方式来做。如下代码直接运行即可看到效果。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
<![CDATA[
import mx.controls.Text;
import mx.events.SliderEvent;
private var thumbIdx:int;
private var labelv:String;
private function setThumbIdx(evt:SliderEvent):void {
switch (evt.type) {
case SliderEvent.THUMB_RELEASE:
thumbIdx = evt.thumbIndex;
var scale:int=dataSlider.width/(dataSlider.maximum-dataSlider.minimum);
if(thumbIdx==0)
{
htipminvalue.text=labelv;
htipminvalue.x=dataSlider.x+((Number(labelv))%dataSlider.minimum)*scale;
}
if(thumbIdx==1)
{
htipmaxvalue.text=labelv;
htipmaxvalue.x=dataSlider.x+((Number(labelv))%dataSlider.minimum)*scale;
}
break;
}
}
private function formatFunction(item:Object):String {
labelv=item.toString();
return item.toString();
}
]]>
</mx:Script>
<mx:Canvas label="ComboBox Control Example"
height="75%" width="75%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
color="0xffffff" >
<mx:Label id="htipminvalue" y="40" text="2000" x="50"/>
<mx:Label id="htipmaxvalue" y="40" text="2020" x="250"/>
<mx:HSlider id="dataSlider" y="50" width="200" x="50" allowTrackClick="false"
minimum="2000" maximum="2020" values="[2000,2020]" showDataTip="true" snapInterval="5"
dataTipFormatFunction="formatFunction" liveDragging="true"
thumbRelease="setThumbIdx(event);"
thumbCount="2" allowThumbOverlap="false" tickInterval="5" showTrackHighlight="true"
/>
</mx:Canvas>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
<![CDATA[
import mx.controls.Text;
import mx.events.SliderEvent;
private var thumbIdx:int;
private var labelv:String;
private function setThumbIdx(evt:SliderEvent):void {
switch (evt.type) {
case SliderEvent.THUMB_RELEASE:
thumbIdx = evt.thumbIndex;
var scale:int=dataSlider.width/(dataSlider.maximum-dataSlider.minimum);
if(thumbIdx==0)
{
htipminvalue.text=labelv;
htipminvalue.x=dataSlider.x+((Number(labelv))%dataSlider.minimum)*scale;
}
if(thumbIdx==1)
{
htipmaxvalue.text=labelv;
htipmaxvalue.x=dataSlider.x+((Number(labelv))%dataSlider.minimum)*scale;
}
break;
}
}
private function formatFunction(item:Object):String {
labelv=item.toString();
return item.toString();
}
]]>
</mx:Script>
<mx:Canvas label="ComboBox Control Example"
height="75%" width="75%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
color="0xffffff" >
<mx:Label id="htipminvalue" y="40" text="2000" x="50"/>
<mx:Label id="htipmaxvalue" y="40" text="2020" x="250"/>
<mx:HSlider id="dataSlider" y="50" width="200" x="50" allowTrackClick="false"
minimum="2000" maximum="2020" values="[2000,2020]" showDataTip="true" snapInterval="5"
dataTipFormatFunction="formatFunction" liveDragging="true"
thumbRelease="setThumbIdx(event);"
thumbCount="2" allowThumbOverlap="false" tickInterval="5" showTrackHighlight="true"
/>
</mx:Canvas>
</mx:Application>