quadtextsliders.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 horizontalGap="-2" paddingLeft="-5" >
		
		<mx:HSlider
			width="45"
			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, sliderItem3.value, sliderItem4.value]; dispatchMyEvent(); }" />
		<mx:HSlider
			width="45"
			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, sliderItem3.value, sliderItem4.value]; dispatchMyEvent(); }" />
		<mx:HSlider
			width="45"
			thumbCount="1" 
			styleName="fseSliders"
			minimum="{min}"
			maximum="{max}"
			value="{styleValue[2]}"
			dataTipPrecision="{snapInt == 1?(0):2}"
			snapInterval="{snapInt}"
			liveDragging="{liveDrag}"
			id="sliderItem3"
			change="{this.styleValue = [sliderItem1.value , sliderItem2.value, sliderItem3.value, sliderItem4.value]; dispatchMyEvent(); }" />
		<mx:HSlider
			width="45"
			thumbCount="1" 
			styleName="fseSliders"
			minimum="{min}"
			maximum="{max}"
			value="{styleValue[3]}"
			dataTipPrecision="{snapInt == 1?(0):2}"
			snapInterval="{snapInt}"
			liveDragging="{liveDrag}"
			id="sliderItem4"
			change="{this.styleValue = [sliderItem1.value , sliderItem2.value, sliderItem3.value, sliderItem4.value]; dispatchMyEvent(); }" />
	</mx:HBox>			
			
	<mx:HBox horizontalGap="2">
		
		<mx:TextInput width="40" id="textBox1" text="{sliderItem1.value}" restrict="0123456789." 
			change="updateSliders(event.target.text, 1)" styleName="sliderText" height="20" />
			
		<mx:TextInput width="40" id="textBox2" text="{sliderItem2.value}" restrict="0123456789." 
			change="updateSliders(event.target.text, 2)" styleName="sliderText" height="20" />
		
		<mx:TextInput width="40" id="textBox3" text="{sliderItem3.value}" restrict="0123456789." 
			change="updateSliders(event.target.text, 3)" styleName="sliderText" height="20" />
		
		<mx:TextInput width="40" id="textBox4" text="{sliderItem4.value}" restrict="0123456789." 
			change="updateSliders(event.target.text, 4)" 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;
			
			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 , sliderItem3.value, sliderItem4.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>