<?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>