text: /**
   * Parent view for the 4 sliders seen on the color picker window.
   * @private
   */
  Ext.define('Ext.ux.colorpick.Slider', {
      extend     : 'Ext.container.Container',
      xtype      : 'colorpickerslider',
      controller : 'colorpick-slidercontroller',
  
      afterRender: function() {
          this.callParent(arguments);
  
          var width = this.width,
              dragCt = this.lookupReference('dragHandleContainer'),
              dragWidth = dragCt.getWidth();
  
          dragCt.el.setStyle('left', ((width - dragWidth) / 2) + 'px');
      },
  
      baseCls : Ext.baseCSSPrefix + 'colorpicker-slider',
  
      requires: [
          'Ext.ux.colorpick.SliderController'
      ],
  
      referenceHolder: true,
  
      listeners : {
          element: 'el',
          mousedown: 'onMouseDown',
          mouseup: 'onMouseUp',
          dragstart: 'onDragStart'
      },
  
      // Container for the drag handle; needed since the slider
      // is of static size, while the parent container positions
      // it in the center; this is what receives the beautiful
      // color gradients for the visual
      items: {
          xtype     : 'container',
          cls       : Ext.baseCSSPrefix + 'colorpicker-draghandle-container',
          reference : 'dragHandleContainer',
          height    : '100%',
  
          // This is the drag handle; note it's 100%x1 in size to allow full
          // vertical drag travel; the inner div has the bigger image
          items: {
              xtype     : 'component',
              cls       : Ext.baseCSSPrefix + 'colorpicker-draghandle-outer',
              reference : 'dragHandle',
              width     : '100%',
              height    : 1,
              draggable : true,
              html      : '<div class="' + Ext.baseCSSPrefix + 'colorpicker-draghandle"></div>'
          }
      },
  
      // <debug>
      // Called via data binding whenever selectedColor.h changes;
      setHue: function () {
          Ext.raise('Must implement setHue() in a child class!');
      },
      // </debug>
  
      getDragHandle: function () {
          return this.lookupReference('dragHandle');
      },
  
      getDragContainer: function () {
          return this.lookupReference('dragHandleContainer');
      }
  });
  