Ext.Slider = function (id, config) { 
     this.init (id, config || {}); 
     } 
      
Ext.Slider.prototype = { 
     width: 300, 
     initialValue: 0, 
     zone: null, 
     slider: null, 
     ddEl: null, 
     startDrag: null, 
     endDrag: null, 
     onDrag: null, 
     bgImage: '/images/icons/slider_bg.gif', 
     sliderImage: '/images/icons/slider_horiz.gif', 
     disable:false,

     init: function (id, config) { 
        Ext.apply (this, config); 
        this.zone = Ext.DomHelper.append (Ext.get (id),  { tag: 'div', id: Ext.id (), style: 'position:relative;width: '+this.width+'px;height: 20px;background-image:url('+this.bgImage+');z-index:1;' }, true); 
        this.slider = Ext.DomHelper.append (this.zone,  { tag: 'div', id: Ext.id (), style: 'position:absolute;left:'+this.initialValue+'px;width:13px;height:20px;background-image:url('+this.sliderImage+'); overflow: hidden;z-index:2' }, true); 
        var instance = this; 
        this.ddEl = new Ext.dd.DD (this.slider); 
        this.ddEl.setYConstraint (0, 0); 
        this.ddEl.setXConstraint (this.slider.getX ()-this.zone.getX (), this.zone.getRight () -this.slider.getRight ()); 
        this.slider.on ('mouseover', function () { 

              
           if(!instance.disable){
              
              if (!instance.ddEl.isDragged)  
                 this.setStyle ('background-position', '0px -20px');  
               this.setStyle ('cursor', 'w-resize'); 
           }
           }); 
        this.slider.on ('mouseout', function () { 
           if(!instance.disable){
           if (!instance.ddEl.isDragged)  
              this.setStyle ('background-position', '0px 0px');  
           this.setStyle ('cursor', 'default'); 
          }
           }); 
        this.ddEl.onMouseDown = function (x, y) { 
           if(!instance.disable){
           instance.ddEl.isDragged = true; 
           if (typeof instance.onDragStart == 'function') 
              instance.onDragStart (((instance.slider.getX () - instance.zone.getX ()) /  (instance.width-13) * 100)+150 );  
           instance.slider.setStyle ('background-position',  '0px -40px'); 
           }
           }; 
        this.ddEl.onMouseUp = function (x, y) { 
           if(!instance.disable){
           instance.ddEl.isDragged = false; 
           if (typeof instance.onDragEnd == 'function') 
              instance.onDragEnd (((instance.slider.getX () - instance.zone.getX ()) /  (instance.width-13) * 100)+150);  
           instance.slider.setStyle ('background-position',  '0px 0px'); 
           }
           }; 
        this.ddEl.onDrag = function (e) { 
           if(!instance.disable){
           if (typeof instance.onDrag == 'function') 
              instance.onDrag (((instance.slider.getX () - instance.zone.getX ()) /  (instance.width-13) * 100)+150);  
          }
           }; 

         this.setValue=function(x){
             if(x>=250)                       
               this.slider.setLeft(37);
             else
               if(x<=150) 
                 this.slider.setLeft(0);
               else 
                 this.slider.setLeft((x-150)*37/100);

         };
         this.setDisable=function(disable){
             this.disable=disable;           	 
             if(disable){ 
                this.ddEl.lock();                   
             }
             else
               this.ddEl.unlock();

           };
            
        } 

     };