doubletextsliders.mxml

Flex2StyleExplorer form Adobe

<?xml version="1.0" encoding="utf-8"?>
<mx:FormItem xmlns:mx="http://www.adobe.com/2006/mxml" label="{sliderLabel}" width="100%" creationComplete="setDefault()" >
	<mx:HBox verticalAlign="middle" width="100%" paddingRight="{padRight}" horizontalGap="2">
		<mx:HBox horizontalGap="-3">
		
			<mx:HSlider
				width="60"
				thumbCount="1" 
				styleName="fseSliders"
				minimum="{min}"
				maximum="{max}"
				value="{styleValue[0]}"
				dataTipPrecision="{snapInt == 1?(0):2}"
				snapInterval="{snapInt}"
				liveDragging="{liveDrag}"
				id="sliderItem1"
				change="{this.styleValue = [sliderItem1.value , sliderItem2.value]; dispatchMyEvent(); }" />
			<mx:HSlider
				width="60"
				thumbCount="1" 
				styleName="fseSliders"
				minimum="{min}"
				maximum="{max}"
				value="{styleValue[1]}"
				dataTipPrecision="{snapInt == 1?(0):2}"
				snapInterval="{snapInt}"
				liveDragging="{liveDrag}"
				id="sliderItem2"
				change="{this.styleValue = [sliderItem1.value , sliderItem2.value]; dispatchMyEvent(); }" />
			</mx:HBox>			
			
		<mx:Spacer width="100%" />
			
		<mx:TextInput width="{textWidth != 0?(textWidth):snapInt == 1?(30):40}" id="textBox1" text="{sliderItem1.value}" restrict="0123456789." 
			change="updateSliders(event.target.text, 1)" styleName="sliderText" height="20" />
			
		<mx:TextInput width="{textWidth != 0?(textWidth):snapInt == 1?(30):40}" id="textBox2" text="{sliderItem2.value}" restrict="0123456789." 
			change="updateSliders(event.target.text, 2)" styleName="sliderText" height="20" />
			
	</mx:HBox>
		
	<mx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			[Bindable]
			public var sliderLabel:String;
			
			[Bindable]
			public var min:Number;
			
			[Bindable]
			public var textWidth:Number = 0;
			
			[Bindable]
			public var max:Number;
			
			[Bindable]
			public var styleValue:Array;
				
			[Bindable]
			public var snapInt:Number = 1;

			[Bindable]
			public var liveDrag:Boolean = true;
			
			[Bindable]
			public var padRight:Number = 5;
			
			private function dispatchMyEvent():void {
                this.dispatchEvent( new Event("dataChange") );
            }
            
            private function updateSliders(value:String, whichSlider:Number):void {
            	if (value != '.' && value != '0.' && value != '0.0' && value != '.0' ) {
	            	this['sliderItem' + whichSlider].value = Number(value);
	            	this.styleValue = [sliderItem1.value , sliderItem2.value];
					dispatchMyEvent();
	            }
				
            }
            
              [Bindable]
			public var defaultValue:Array;
           
           public function setDefault():void {
           		defaultValue = styleValue;
           }
           
           public function restoreDefault():void {
           		styleValue = defaultValue;
           }
           
		]]>
	</mx:Script>
	
	<mx:Metadata>
        [Event("dataChange")]
    </mx:Metadata>
   
</mx:FormItem>