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