Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / src / widgets / Slider.js
index 87dae02..57a0ee8 100644 (file)
 /*!
- * Ext JS Library 3.1.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-/**\r
- * @class Ext.Slider\r
- * @extends Ext.BoxComponent\r
- * Slider which supports vertical or horizontal orientation, keyboard adjustments,\r
- * configurable snapping, axis clicking and animation. Can be added as an item to\r
- * any container. Example usage:\r
-<pre><code>\r
-new Ext.Slider({\r
-    renderTo: Ext.getBody(),\r
-    width: 200,\r
-    value: 50,\r
-    increment: 10,\r
-    minValue: 0,\r
-    maxValue: 100\r
-});\r
-</code></pre>\r
- */\r
-Ext.Slider = Ext.extend(Ext.BoxComponent, {\r
-       /**\r
-        * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.\r
-        */\r
-       /**\r
-        * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.\r
-        */\r
-    vertical: false,\r
-       /**\r
-        * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.\r
-        */\r
-    minValue: 0,\r
-       /**\r
-        * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.\r
-        */\r
-    maxValue: 100,\r
-    /**\r
-     * @cfg {Number/Boolean} decimalPrecision.\r
-     * <p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>\r
-     * <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>\r
-     */\r
-    decimalPrecision: 0,\r
-       /**\r
-        * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead.\r
-        */\r
-    keyIncrement: 1,\r
-       /**\r
-        * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.\r
-        */\r
-    increment: 0,\r
-       // private\r
-    clickRange: [5,15],\r
-       /**\r
-        * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true\r
-        */\r
-    clickToChange : true,\r
-       /**\r
-        * @cfg {Boolean} animate Turn on or off animation. Defaults to true\r
-        */\r
-    animate: true,\r
-\r
-    /**\r
-     * True while the thumb is in a drag operation\r
-     * @type boolean\r
-     */\r
-    dragging: false,\r
-\r
-    // private override\r
-    initComponent : function(){\r
-        if(!Ext.isDefined(this.value)){\r
-            this.value = this.minValue;\r
-        }\r
-        Ext.Slider.superclass.initComponent.call(this);\r
-        this.keyIncrement = Math.max(this.increment, this.keyIncrement);\r
-        this.addEvents(\r
-            /**\r
-             * @event beforechange\r
-             * Fires before the slider value is changed. By returning false from an event handler,\r
-             * you can cancel the event and prevent the slider from changing.\r
-                        * @param {Ext.Slider} slider The slider\r
-                        * @param {Number} newValue The new value which the slider is being changed to.\r
-                        * @param {Number} oldValue The old value which the slider was previously.\r
-             */\r
-                       'beforechange',\r
-                       /**\r
-                        * @event change\r
-                        * Fires when the slider value is changed.\r
-                        * @param {Ext.Slider} slider The slider\r
-                        * @param {Number} newValue The new value which the slider has been changed to.\r
-                        */\r
-                       'change',\r
-                       /**\r
-                        * @event changecomplete\r
-                        * Fires when the slider value is changed by the user and any drag operations have completed.\r
-                        * @param {Ext.Slider} slider The slider\r
-                        * @param {Number} newValue The new value which the slider has been changed to.\r
-                        */\r
-                       'changecomplete',\r
-                       /**\r
-                        * @event dragstart\r
-             * Fires after a drag operation has started.\r
-                        * @param {Ext.Slider} slider The slider\r
-                        * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker\r
-                        */\r
-                       'dragstart',\r
-                       /**\r
-                        * @event drag\r
-             * Fires continuously during the drag operation while the mouse is moving.\r
-                        * @param {Ext.Slider} slider The slider\r
-                        * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker\r
-                        */\r
-                       'drag',\r
-                       /**\r
-                        * @event dragend\r
-             * Fires after the drag operation has completed.\r
-                        * @param {Ext.Slider} slider The slider\r
-                        * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker\r
-                        */\r
-                       'dragend'\r
-               );\r
-\r
-        if(this.vertical){\r
-            Ext.apply(this, Ext.Slider.Vertical);\r
-        }\r
-    },\r
-\r
-       // private override\r
-    onRender : function(){\r
-        this.autoEl = {\r
-            cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),\r
-            cn:{cls:'x-slider-end',cn:{cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}}\r
-        };\r
-        Ext.Slider.superclass.onRender.apply(this, arguments);\r
-        this.endEl = this.el.first();\r
-        this.innerEl = this.endEl.first();\r
-        this.thumb = this.innerEl.first();\r
-        this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2;\r
-        this.focusEl = this.thumb.next();\r
-        this.initEvents();\r
-    },\r
-\r
-       // private override\r
-    initEvents : function(){\r
-        this.thumb.addClassOnOver('x-slider-thumb-over');\r
-        this.mon(this.el, {\r
-            scope: this,\r
-            mousedown: this.onMouseDown,\r
-            keydown: this.onKeyDown\r
-        });\r
-\r
-        this.focusEl.swallowEvent("click", true);\r
-\r
-        this.tracker = new Ext.dd.DragTracker({\r
-            onBeforeStart: this.onBeforeDragStart.createDelegate(this),\r
-            onStart: this.onDragStart.createDelegate(this),\r
-            onDrag: this.onDrag.createDelegate(this),\r
-            onEnd: this.onDragEnd.createDelegate(this),\r
-            tolerance: 3,\r
-            autoStart: 300\r
-        });\r
-        this.tracker.initEl(this.thumb);\r
-    },\r
-\r
-       // private override\r
-    onMouseDown : function(e){\r
-        if(this.disabled){\r
-            return;\r
-        }\r
-        if(this.clickToChange && e.target != this.thumb.dom){\r
-            var local = this.innerEl.translatePoints(e.getXY());\r
-            this.onClickChange(local);\r
-        }\r
-        this.focus();\r
-    },\r
-\r
-       // private\r
-    onClickChange : function(local){\r
-        if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){\r
-            this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);\r
-        }\r
-    },\r
-\r
-       // private\r
-    onKeyDown : function(e){\r
-        if(this.disabled){e.preventDefault();return;}\r
-        var k = e.getKey();\r
-        switch(k){\r
-            case e.UP:\r
-            case e.RIGHT:\r
-                e.stopEvent();\r
-                if(e.ctrlKey){\r
-                    this.setValue(this.maxValue, undefined, true);\r
-                }else{\r
-                    this.setValue(this.value+this.keyIncrement, undefined, true);\r
-                }\r
-            break;\r
-            case e.DOWN:\r
-            case e.LEFT:\r
-                e.stopEvent();\r
-                if(e.ctrlKey){\r
-                    this.setValue(this.minValue, undefined, true);\r
-                }else{\r
-                    this.setValue(this.value-this.keyIncrement, undefined, true);\r
-                }\r
-            break;\r
-            default:\r
-                e.preventDefault();\r
-        }\r
-    },\r
-\r
-       // private\r
-    doSnap : function(value){\r
-        if(!(this.increment && value)){\r
-            return value;\r
-        }\r
-        var newValue = value, \r
-            inc = this.increment,\r
-            m = value % inc;\r
-        if(m != 0){\r
-            newValue -= m;\r
-            if(m * 2 > inc){\r
-                newValue += inc;\r
-            }else if(m * 2 < -inc){\r
-                newValue -= inc;\r
-            }\r
-        }\r
-        return newValue.constrain(this.minValue,  this.maxValue);\r
-    },\r
-\r
-       // private\r
-    afterRender : function(){\r
-        Ext.Slider.superclass.afterRender.apply(this, arguments);\r
-        if(this.value !== undefined){\r
-            var v = this.normalizeValue(this.value);\r
-            if(v !== this.value){\r
-                delete this.value;\r
-                this.setValue(v, false);\r
-            }else{\r
-                this.moveThumb(this.translateValue(v), false);\r
-            }\r
-        }\r
-    },\r
-\r
-       // private\r
-    getRatio : function(){\r
-        var w = this.innerEl.getWidth(),\r
-            v = this.maxValue - this.minValue;\r
-        return v == 0 ? w : (w/v);\r
-    },\r
-\r
-       // private\r
-    normalizeValue : function(v){\r
-        v = this.doSnap(v);\r
-        v = Ext.util.Format.round(v, this.decimalPrecision);\r
-        v = v.constrain(this.minValue, this.maxValue);\r
-        return v;\r
-    },\r
-\r
-       /**\r
-        * Programmatically sets the value of the Slider. Ensures that the value is constrained within\r
-        * the minValue and maxValue.\r
-        * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)\r
-        * @param {Boolean} animate Turn on or off animation, defaults to true\r
-        */\r
-    setValue : function(v, animate, changeComplete){\r
-        v = this.normalizeValue(v);\r
-        if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){\r
-            this.value = v;\r
-            this.moveThumb(this.translateValue(v), animate !== false);\r
-            this.fireEvent('change', this, v);\r
-            if(changeComplete){\r
-                this.fireEvent('changecomplete', this, v);\r
-            }\r
-        }\r
-    },\r
-\r
-       // private\r
-    translateValue : function(v){\r
-        var ratio = this.getRatio();\r
-        return (v * ratio) - (this.minValue * ratio) - this.halfThumb;\r
-    },\r
-\r
-       reverseValue : function(pos){\r
-        var ratio = this.getRatio();\r
-        return (pos + this.halfThumb + (this.minValue * ratio)) / ratio;\r
-    },\r
-\r
-       // private\r
-    moveThumb: function(v, animate){\r
-        if(!animate || this.animate === false){\r
-            this.thumb.setLeft(v);\r
-        }else{\r
-            this.thumb.shift({left: v, stopFx: true, duration:.35});\r
-        }\r
-    },\r
-\r
-       // private\r
-    focus : function(){\r
-        this.focusEl.focus(10);\r
-    },\r
-\r
-       // private\r
-    onBeforeDragStart : function(e){\r
-        return !this.disabled;\r
-    },\r
-\r
-       // private\r
-    onDragStart: function(e){\r
-        this.thumb.addClass('x-slider-thumb-drag');\r
-        this.dragging = true;\r
-        this.dragStartValue = this.value;\r
-        this.fireEvent('dragstart', this, e);\r
-    },\r
-\r
-       // private\r
-    onDrag: function(e){\r
-        var pos = this.innerEl.translatePoints(this.tracker.getXY());\r
-        this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false);\r
-        this.fireEvent('drag', this, e);\r
-    },\r
-\r
-       // private\r
-    onDragEnd: function(e){\r
-        this.thumb.removeClass('x-slider-thumb-drag');\r
-        this.dragging = false;\r
-        this.fireEvent('dragend', this, e);\r
-        if(this.dragStartValue != this.value){\r
-            this.fireEvent('changecomplete', this, this.value);\r
-        }\r
-    },\r
-\r
-       // private\r
-    onResize : function(w, h){\r
-        this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));\r
-        this.syncThumb();\r
-    },\r
-    \r
-    //private\r
-    onDisable: function(){\r
-        Ext.Slider.superclass.onDisable.call(this);\r
-        this.thumb.addClass(this.disabledClass);\r
-        if(Ext.isIE){\r
-            //IE breaks when using overflow visible and opacity other than 1.\r
-            //Create a place holder for the thumb and display it.\r
-            var xy = this.thumb.getXY();\r
-            this.thumb.hide();\r
-            this.innerEl.addClass(this.disabledClass).dom.disabled = true;\r
-            if (!this.thumbHolder){\r
-                this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});    \r
-            }\r
-            this.thumbHolder.show().setXY(xy);\r
-        }\r
-    },\r
-    \r
-    //private\r
-    onEnable: function(){\r
-        Ext.Slider.superclass.onEnable.call(this);\r
-        this.thumb.removeClass(this.disabledClass);\r
-        if(Ext.isIE){\r
-            this.innerEl.removeClass(this.disabledClass).dom.disabled = false;\r
-            if(this.thumbHolder){\r
-                this.thumbHolder.hide();\r
-            }\r
-            this.thumb.show();\r
-            this.syncThumb();\r
-        }\r
-    },\r
-    \r
-    /**\r
-     * Synchronizes the thumb position to the proper proportion of the total component width based\r
-     * on the current slider {@link #value}.  This will be called automatically when the Slider\r
-     * is resized by a layout, but if it is rendered auto width, this method can be called from\r
-     * another resize handler to sync the Slider if necessary.\r
-     */\r
-    syncThumb : function(){\r
-        if(this.rendered){\r
-            this.moveThumb(this.translateValue(this.value));\r
-        }\r
-    },\r
-\r
-       /**\r
-        * Returns the current value of the slider\r
-        * @return {Number} The current value of the slider\r
-        */\r
-    getValue : function(){\r
-        return this.value;\r
-    },\r
-    \r
-    // private\r
-    beforeDestroy : function(){\r
-        Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder');\r
-        Ext.Slider.superclass.beforeDestroy.call(this);\r
-    }\r
-});\r
-Ext.reg('slider', Ext.Slider);\r
-\r
-// private class to support vertical sliders\r
-Ext.Slider.Vertical = {\r
-    onResize : function(w, h){\r
-        this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));\r
-        this.syncThumb();\r
-    },\r
-\r
-    getRatio : function(){\r
-        var h = this.innerEl.getHeight(),\r
-            v = this.maxValue - this.minValue;\r
-        return h/v;\r
-    },\r
-\r
-    moveThumb: function(v, animate){\r
-        if(!animate || this.animate === false){\r
-            this.thumb.setBottom(v);\r
-        }else{\r
-            this.thumb.shift({bottom: v, stopFx: true, duration:.35});\r
-        }\r
-    },\r
-\r
-    onDrag: function(e){\r
-        var pos = this.innerEl.translatePoints(this.tracker.getXY()),\r
-            bottom = this.innerEl.getHeight()-pos.top;\r
-        this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false);\r
-        this.fireEvent('drag', this, e);\r
-    },\r
-\r
-    onClickChange : function(local){\r
-        if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){\r
-            var bottom = this.innerEl.getHeight() - local.top;\r
-            this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true);\r
-        }\r
-    }\r
-};
\ No newline at end of file
+Ext.ns('Ext.slider');
+
+/**
+ * @class Ext.slider.Thumb
+ * @extends Object
+ * Represents a single thumb element on a Slider. This would not usually be created manually and would instead
+ * be created internally by an {@link Ext.slider.MultiSlider Ext.Slider}.
+ */
+Ext.slider.Thumb = Ext.extend(Object, {
+
+    /**
+     * @constructor
+     * @cfg {Ext.slider.MultiSlider} slider The Slider to render to (required)
+     */
+    constructor: function(config) {
+        /**
+         * @property slider
+         * @type Ext.slider.MultiSlider
+         * The slider this thumb is contained within
+         */
+        Ext.apply(this, config || {}, {
+            cls: 'x-slider-thumb',
+
+            /**
+             * @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings
+             */
+            constrain: false
+        });
+
+        Ext.slider.Thumb.superclass.constructor.call(this, config);
+
+        if (this.slider.vertical) {
+            Ext.apply(this, Ext.slider.Thumb.Vertical);
+        }
+    },
+
+    /**
+     * Renders the thumb into a slider
+     */
+    render: function() {
+        this.el = this.slider.innerEl.insertFirst({cls: this.cls});
+
+        this.initEvents();
+    },
+
+    /**
+     * Enables the thumb if it is currently disabled
+     */
+    enable: function() {
+        this.disabled = false;
+        this.el.removeClass(this.slider.disabledClass);
+    },
+
+    /**
+     * Disables the thumb if it is currently enabled
+     */
+    disable: function() {
+        this.disabled = true;
+        this.el.addClass(this.slider.disabledClass);
+    },
+
+    /**
+     * Sets up an Ext.dd.DragTracker for this thumb
+     */
+    initEvents: function() {
+        var el = this.el;
+
+        el.addClassOnOver('x-slider-thumb-over');
+
+        this.tracker = new Ext.dd.DragTracker({
+            onBeforeStart: this.onBeforeDragStart.createDelegate(this),
+            onStart      : this.onDragStart.createDelegate(this),
+            onDrag       : this.onDrag.createDelegate(this),
+            onEnd        : this.onDragEnd.createDelegate(this),
+            tolerance    : 3,
+            autoStart    : 300
+        });
+
+        this.tracker.initEl(el);
+    },
+
+    /**
+     * @private
+     * This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled,
+     * this returns false to disable the DragTracker too.
+     * @return {Boolean} False if the slider is currently disabled
+     */
+    onBeforeDragStart : function(e) {
+        if (this.disabled) {
+            return false;
+        } else {
+            this.slider.promoteThumb(this);
+            return true;
+        }
+    },
+
+    /**
+     * @private
+     * This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class
+     * to the thumb and fires the 'dragstart' event
+     */
+    onDragStart: function(e){
+        this.el.addClass('x-slider-thumb-drag');
+        this.dragging = true;
+        this.dragStartValue = this.value;
+
+        this.slider.fireEvent('dragstart', this.slider, e, this);
+    },
+
+    /**
+     * @private
+     * This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time
+     * the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag
+     */
+    onDrag: function(e) {
+        var slider   = this.slider,
+            index    = this.index,
+            newValue = this.getNewValue();
+
+        if (this.constrain) {
+            var above = slider.thumbs[index + 1],
+                below = slider.thumbs[index - 1];
+
+            if (below != undefined && newValue <= below.value) newValue = below.value;
+            if (above != undefined && newValue >= above.value) newValue = above.value;
+        }
+
+        slider.setValue(index, newValue, false);
+        slider.fireEvent('drag', slider, e, this);
+    },
+
+    getNewValue: function() {
+        var slider   = this.slider,
+            pos      = slider.innerEl.translatePoints(this.tracker.getXY());
+
+        return Ext.util.Format.round(slider.reverseValue(pos.left), slider.decimalPrecision);
+    },
+
+    /**
+     * @private
+     * This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and
+     * fires the 'changecomplete' event with the new value
+     */
+    onDragEnd: function(e) {
+        var slider = this.slider,
+            value  = this.value;
+
+        this.el.removeClass('x-slider-thumb-drag');
+
+        this.dragging = false;
+        slider.fireEvent('dragend', slider, e);
+
+        if (this.dragStartValue != value) {
+            slider.fireEvent('changecomplete', slider, value, this);
+        }
+    }
+});
+
+/**
+ * @class Ext.slider.MultiSlider
+ * @extends Ext.BoxComponent
+ * Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation. Can be added as an item to any container. Example usage:
+<pre>
+new Ext.Slider({
+    renderTo: Ext.getBody(),
+    width: 200,
+    value: 50,
+    increment: 10,
+    minValue: 0,
+    maxValue: 100
+});
+</pre>
+ * Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:
+<pre>
+new Ext.Slider({
+    renderTo: Ext.getBody(),
+    width: 200,
+    values: [25, 50, 75],
+    minValue: 0,
+    maxValue: 100,
+
+    //this defaults to true, setting to false allows the thumbs to pass each other
+    {@link #constrainThumbs}: false
+});
+</pre>
+ */
+Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
+    /**
+     * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
+     */
+    /**
+     * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
+     */
+    vertical: false,
+    /**
+     * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
+     */
+    minValue: 0,
+    /**
+     * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
+     */
+    maxValue: 100,
+    /**
+     * @cfg {Number/Boolean} decimalPrecision.
+     * <p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>
+     * <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>
+     */
+    decimalPrecision: 0,
+    /**
+     * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead.
+     */
+    keyIncrement: 1,
+    /**
+     * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
+     */
+    increment: 0,
+
+    /**
+     * @private
+     * @property clickRange
+     * @type Array
+     * Determines whether or not a click to the slider component is considered to be a user request to change the value. Specified as an array of [top, bottom],
+     * the click event's 'top' property is compared to these numbers and the click only considered a change request if it falls within them. e.g. if the 'top'
+     * value of the click event is 4 or 16, the click is not considered a change request as it falls outside of the [5, 15] range
+     */
+    clickRange: [5,15],
+
+    /**
+     * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
+     */
+    clickToChange : true,
+    /**
+     * @cfg {Boolean} animate Turn on or off animation. Defaults to true
+     */
+    animate: true,
+
+    /**
+     * True while the thumb is in a drag operation
+     * @type Boolean
+     */
+    dragging: false,
+
+    /**
+     * @cfg {Boolean} constrainThumbs True to disallow thumbs from overlapping one another. Defaults to true
+     */
+    constrainThumbs: true,
+
+    /**
+     * @private
+     * @property topThumbZIndex
+     * @type Number
+     * The number used internally to set the z index of the top thumb (see promoteThumb for details)
+     */
+    topThumbZIndex: 10000,
+
+    // private override
+    initComponent : function(){
+        if(!Ext.isDefined(this.value)){
+            this.value = this.minValue;
+        }
+
+        /**
+         * @property thumbs
+         * @type Array
+         * Array containing references to each thumb
+         */
+        this.thumbs = [];
+
+        Ext.slider.MultiSlider.superclass.initComponent.call(this);
+
+        this.keyIncrement = Math.max(this.increment, this.keyIncrement);
+        this.addEvents(
+            /**
+             * @event beforechange
+             * Fires before the slider value is changed. By returning false from an event handler,
+             * you can cancel the event and prevent the slider from changing.
+             * @param {Ext.Slider} slider The slider
+             * @param {Number} newValue The new value which the slider is being changed to.
+             * @param {Number} oldValue The old value which the slider was previously.
+             */
+            'beforechange',
+
+            /**
+             * @event change
+             * Fires when the slider value is changed.
+             * @param {Ext.Slider} slider The slider
+             * @param {Number} newValue The new value which the slider has been changed to.
+             * @param {Ext.slider.Thumb} thumb The thumb that was changed
+             */
+            'change',
+
+            /**
+             * @event changecomplete
+             * Fires when the slider value is changed by the user and any drag operations have completed.
+             * @param {Ext.Slider} slider The slider
+             * @param {Number} newValue The new value which the slider has been changed to.
+             * @param {Ext.slider.Thumb} thumb The thumb that was changed
+             */
+            'changecomplete',
+
+            /**
+             * @event dragstart
+             * Fires after a drag operation has started.
+             * @param {Ext.Slider} slider The slider
+             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
+             */
+            'dragstart',
+
+            /**
+             * @event drag
+             * Fires continuously during the drag operation while the mouse is moving.
+             * @param {Ext.Slider} slider The slider
+             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
+             */
+            'drag',
+
+            /**
+             * @event dragend
+             * Fires after the drag operation has completed.
+             * @param {Ext.Slider} slider The slider
+             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
+             */
+            'dragend'
+        );
+
+        /**
+         * @property values
+         * @type Array
+         * Array of values to initalize the thumbs with
+         */
+        if (this.values == undefined || Ext.isEmpty(this.values)) this.values = [0];
+
+        var values = this.values;
+
+        for (var i=0; i < values.length; i++) {
+            this.addThumb(values[i]);
+        }
+
+        if(this.vertical){
+            Ext.apply(this, Ext.slider.Vertical);
+        }
+    },
+
+    /**
+     * Creates a new thumb and adds it to the slider
+     * @param {Number} value The initial value to set on the thumb. Defaults to 0
+     */
+    addThumb: function(value) {
+        var thumb = new Ext.slider.Thumb({
+            value    : value,
+            slider   : this,
+            index    : this.thumbs.length,
+            constrain: this.constrainThumbs
+        });
+        this.thumbs.push(thumb);
+
+        //render the thumb now if needed
+        if (this.rendered) thumb.render();
+    },
+
+    /**
+     * @private
+     * Moves the given thumb above all other by increasing its z-index. This is called when as drag
+     * any thumb, so that the thumb that was just dragged is always at the highest z-index. This is
+     * required when the thumbs are stacked on top of each other at one of the ends of the slider's
+     * range, which can result in the user not being able to move any of them.
+     * @param {Ext.slider.Thumb} topThumb The thumb to move to the top
+     */
+    promoteThumb: function(topThumb) {
+        var thumbs = this.thumbs,
+            zIndex, thumb;
+
+        for (var i = 0, j = thumbs.length; i < j; i++) {
+            thumb = thumbs[i];
+
+            if (thumb == topThumb) {
+                zIndex = this.topThumbZIndex;
+            } else {
+                zIndex = '';
+            }
+
+            thumb.el.setStyle('zIndex', zIndex);
+        }
+    },
+
+    // private override
+    onRender : function() {
+        this.autoEl = {
+            cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
+            cn : {
+                cls: 'x-slider-end',
+                cn : {
+                    cls:'x-slider-inner',
+                    cn : [{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]
+                }
+            }
+        };
+
+        Ext.slider.MultiSlider.superclass.onRender.apply(this, arguments);
+
+        this.endEl   = this.el.first();
+        this.innerEl = this.endEl.first();
+        this.focusEl = this.innerEl.child('.x-slider-focus');
+
+        //render each thumb
+        for (var i=0; i < this.thumbs.length; i++) {
+            this.thumbs[i].render();
+        }
+
+        //calculate the size of half a thumb
+        var thumb      = this.innerEl.child('.x-slider-thumb');
+        this.halfThumb = (this.vertical ? thumb.getHeight() : thumb.getWidth()) / 2;
+
+        this.initEvents();
+    },
+
+    /**
+     * @private
+     * Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element.
+     * Creates a new DragTracker which is used to control what happens when the user drags the thumb around.
+     */
+    initEvents : function(){
+        this.mon(this.el, {
+            scope    : this,
+            mousedown: this.onMouseDown,
+            keydown  : this.onKeyDown
+        });
+
+        this.focusEl.swallowEvent("click", true);
+    },
+
+    /**
+     * @private
+     * Mousedown handler for the slider. If the clickToChange is enabled and the click was not on the draggable 'thumb',
+     * this calculates the new value of the slider and tells the implementation (Horizontal or Vertical) to move the thumb
+     * @param {Ext.EventObject} e The click event
+     */
+    onMouseDown : function(e){
+        if(this.disabled){
+            return;
+        }
+
+        //see if the click was on any of the thumbs
+        var thumbClicked = false;
+        for (var i=0; i < this.thumbs.length; i++) {
+            thumbClicked = thumbClicked || e.target == this.thumbs[i].el.dom;
+        }
+
+        if (this.clickToChange && !thumbClicked) {
+            var local = this.innerEl.translatePoints(e.getXY());
+            this.onClickChange(local);
+        }
+        this.focus();
+    },
+
+    /**
+     * @private
+     * Moves the thumb to the indicated position. Note that a Vertical implementation is provided in Ext.slider.Vertical.
+     * Only changes the value if the click was within this.clickRange.
+     * @param {Object} local Object containing top and left values for the click event.
+     */
+    onClickChange : function(local) {
+        if (local.top > this.clickRange[0] && local.top < this.clickRange[1]) {
+            //find the nearest thumb to the click event
+            var thumb = this.getNearest(local, 'left'),
+                index = thumb.index;
+
+            this.setValue(index, Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
+        }
+    },
+
+    /**
+     * @private
+     * Returns the nearest thumb to a click event, along with its distance
+     * @param {Object} local Object containing top and left values from a click event
+     * @param {String} prop The property of local to compare on. Use 'left' for horizontal sliders, 'top' for vertical ones
+     * @return {Object} The closest thumb object and its distance from the click event
+     */
+    getNearest: function(local, prop) {
+        var localValue = prop == 'top' ? this.innerEl.getHeight() - local[prop] : local[prop],
+            clickValue = this.reverseValue(localValue),
+            nearestDistance = (this.maxValue - this.minValue) + 5, //add a small fudge for the end of the slider 
+            index = 0,
+            nearest = null;
+
+        for (var i=0; i < this.thumbs.length; i++) {
+            var thumb = this.thumbs[i],
+                value = thumb.value,
+                dist  = Math.abs(value - clickValue);
+
+            if (Math.abs(dist <= nearestDistance)) {
+                nearest = thumb;
+                index = i;
+                nearestDistance = dist;
+            }
+        }
+        return nearest;
+    },
+
+    /**
+     * @private
+     * Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right
+     * by this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction
+     * @param {Ext.EventObject} e The Event object
+     */
+    onKeyDown : function(e){
+        if(this.disabled){e.preventDefault();return;}
+        var k = e.getKey();
+        switch(k){
+            case e.UP:
+            case e.RIGHT:
+                e.stopEvent();
+                if(e.ctrlKey){
+                    this.setValue(this.maxValue, undefined, true);
+                }else{
+                    this.setValue(this.value+this.keyIncrement, undefined, true);
+                }
+            break;
+            case e.DOWN:
+            case e.LEFT:
+                e.stopEvent();
+                if(e.ctrlKey){
+                    this.setValue(this.minValue, undefined, true);
+                }else{
+                    this.setValue(this.value-this.keyIncrement, undefined, true);
+                }
+            break;
+            default:
+                e.preventDefault();
+        }
+    },
+
+    /**
+     * @private
+     * If using snapping, this takes a desired new value and returns the closest snapped
+     * value to it
+     * @param {Number} value The unsnapped value
+     * @return {Number} The value of the nearest snap target
+     */
+    doSnap : function(value){
+        if (!(this.increment && value)) {
+            return value;
+        }
+        var newValue = value,
+            inc = this.increment,
+            m = value % inc;
+        if (m != 0) {
+            newValue -= m;
+            if (m * 2 >= inc) {
+                newValue += inc;
+            } else if (m * 2 < -inc) {
+                newValue -= inc;
+            }
+        }
+        return newValue.constrain(this.minValue,  this.maxValue);
+    },
+
+    // private
+    afterRender : function(){
+        Ext.slider.MultiSlider.superclass.afterRender.apply(this, arguments);
+
+        for (var i=0; i < this.thumbs.length; i++) {
+            var thumb = this.thumbs[i];
+
+            if (thumb.value !== undefined) {
+                var v = this.normalizeValue(thumb.value);
+
+                if (v !== thumb.value) {
+                    // delete this.value;
+                    this.setValue(i, v, false);
+                } else {
+                    this.moveThumb(i, this.translateValue(v), false);
+                }
+            }
+        };
+    },
+
+    /**
+     * @private
+     * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,
+     * the ratio is 2
+     * @return {Number} The ratio of pixels to mapped values
+     */
+    getRatio : function(){
+        var w = this.innerEl.getWidth(),
+            v = this.maxValue - this.minValue;
+        return v == 0 ? w : (w/v);
+    },
+
+    /**
+     * @private
+     * Returns a snapped, constrained value when given a desired value
+     * @param {Number} value Raw number value
+     * @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values
+     */
+    normalizeValue : function(v){
+        v = this.doSnap(v);
+        v = Ext.util.Format.round(v, this.decimalPrecision);
+        v = v.constrain(this.minValue, this.maxValue);
+        return v;
+    },
+
+    /**
+     * Sets the minimum value for the slider instance. If the current value is less than the
+     * minimum value, the current value will be changed.
+     * @param {Number} val The new minimum value
+     */
+    setMinValue : function(val){
+        this.minValue = val;
+        this.syncThumb();
+
+        for (var i=0, j = this.thumbs.length; i < j; i++) {
+            if (this.thumbs[i].value < val) this.thumbs[i].value = val;
+        }
+    },
+
+    /**
+     * Sets the maximum value for the slider instance. If the current value is more than the
+     * maximum value, the current value will be changed.
+     * @param {Number} val The new maximum value
+     */
+    setMaxValue : function(val){
+        this.maxValue = val;
+        this.syncThumb();
+
+        for (var i=0; i < this.thumbs.length; i++) {
+            if (this.thumbs[i].value > val) this.thumbs[i].value = val;
+        }
+    },
+
+    /**
+     * Programmatically sets the value of the Slider. Ensures that the value is constrained within
+     * the minValue and maxValue.
+     * @param {Number} index Index of the thumb to move
+     * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
+     * @param {Boolean} animate Turn on or off animation, defaults to true
+     */
+    setValue : function(index, v, animate, changeComplete) {
+        var thumb = this.thumbs[index],
+            el    = thumb.el;
+
+        v = this.normalizeValue(v);
+
+        if (v !== thumb.value && this.fireEvent('beforechange', this, v, thumb.value) !== false) {
+            thumb.value = v;
+            this.moveThumb(index, this.translateValue(v), animate !== false);
+            this.fireEvent('change', this, v, thumb);
+            if(changeComplete){
+                this.fireEvent('changecomplete', this, v, thumb);
+            }
+        }
+    },
+
+    /**
+     * @private
+     */
+    translateValue : function(v) {
+        var ratio = this.getRatio();
+        return (v * ratio) - (this.minValue * ratio) - this.halfThumb;
+    },
+
+    /**
+     * @private
+     * Given a pixel location along the slider, returns the mapped slider value for that pixel.
+     * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reverseValue(50)
+     * returns 200
+     * @param {Number} pos The position along the slider to return a mapped value for
+     * @return {Number} The mapped value for the given position
+     */
+    reverseValue : function(pos){
+        var ratio = this.getRatio();
+        return (pos + (this.minValue * ratio)) / ratio;
+    },
+
+    /**
+     * @private
+     * @param {Number} index Index of the thumb to move
+     */
+    moveThumb: function(index, v, animate){
+        var thumb = this.thumbs[index].el;
+
+        if(!animate || this.animate === false){
+            thumb.setLeft(v);
+        }else{
+            thumb.shift({left: v, stopFx: true, duration:.35});
+        }
+    },
+
+    // private
+    focus : function(){
+        this.focusEl.focus(10);
+    },
+
+    // private
+    onResize : function(w, h){
+        var thumbs = this.thumbs,
+            len = thumbs.length,
+            i = 0;
+            
+        /*
+         * If we happen to be animating during a resize, the position of the thumb will likely be off
+         * when the animation stops. As such, just stop any animations before syncing the thumbs.
+         */
+        for(; i < len; ++i){
+            thumbs[i].el.stopFx();    
+        }
+        this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
+        this.syncThumb();
+        Ext.slider.MultiSlider.superclass.onResize.apply(this, arguments);
+    },
+
+    //private
+    onDisable: function(){
+        Ext.slider.MultiSlider.superclass.onDisable.call(this);
+
+        for (var i=0; i < this.thumbs.length; i++) {
+            var thumb = this.thumbs[i],
+                el    = thumb.el;
+
+            thumb.disable();
+
+            if(Ext.isIE){
+                //IE breaks when using overflow visible and opacity other than 1.
+                //Create a place holder for the thumb and display it.
+                var xy = el.getXY();
+                el.hide();
+
+                this.innerEl.addClass(this.disabledClass).dom.disabled = true;
+
+                if (!this.thumbHolder) {
+                    this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});
+                }
+
+                this.thumbHolder.show().setXY(xy);
+            }
+        }
+    },
+
+    //private
+    onEnable: function(){
+        Ext.slider.MultiSlider.superclass.onEnable.call(this);
+
+        for (var i=0; i < this.thumbs.length; i++) {
+            var thumb = this.thumbs[i],
+                el    = thumb.el;
+
+            thumb.enable();
+
+            if (Ext.isIE) {
+                this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
+
+                if (this.thumbHolder) this.thumbHolder.hide();
+
+                el.show();
+                this.syncThumb();
+            }
+        }
+    },
+
+    /**
+     * Synchronizes the thumb position to the proper proportion of the total component width based
+     * on the current slider {@link #value}.  This will be called automatically when the Slider
+     * is resized by a layout, but if it is rendered auto width, this method can be called from
+     * another resize handler to sync the Slider if necessary.
+     */
+    syncThumb : function() {
+        if (this.rendered) {
+            for (var i=0; i < this.thumbs.length; i++) {
+                this.moveThumb(i, this.translateValue(this.thumbs[i].value));
+            }
+        }
+    },
+
+    /**
+     * Returns the current value of the slider
+     * @param {Number} index The index of the thumb to return a value for
+     * @return {Number} The current value of the slider
+     */
+    getValue : function(index) {
+        return this.thumbs[index].value;
+    },
+
+    /**
+     * Returns an array of values - one for the location of each thumb
+     * @return {Array} The set of thumb values
+     */
+    getValues: function() {
+        var values = [];
+
+        for (var i=0; i < this.thumbs.length; i++) {
+            values.push(this.thumbs[i].value);
+        }
+
+        return values;
+    },
+
+    // private
+    beforeDestroy : function(){
+        Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder');
+        Ext.slider.MultiSlider.superclass.beforeDestroy.call(this);
+    }
+});
+
+Ext.reg('multislider', Ext.slider.MultiSlider);
+
+/**
+ * @class Ext.slider.SingleSlider
+ * @extends Ext.slider.MultiSlider
+ * Slider which supports vertical or horizontal orientation, keyboard adjustments,
+ * configurable snapping, axis clicking and animation. Can be added as an item to
+ * any container. Example usage:
+<pre><code>
+new Ext.slider.SingleSlider({
+    renderTo: Ext.getBody(),
+    width: 200,
+    value: 50,
+    increment: 10,
+    minValue: 0,
+    maxValue: 100
+});
+</code></pre>
+ * The class Ext.slider.SingleSlider is aliased to Ext.Slider for backwards compatibility.
+ */
+Ext.slider.SingleSlider = Ext.extend(Ext.slider.MultiSlider, {
+    constructor: function(config) {
+      config = config || {};
+
+      Ext.applyIf(config, {
+          values: [config.value || 0]
+      });
+
+      Ext.slider.SingleSlider.superclass.constructor.call(this, config);
+    },
+
+    /**
+     * Returns the current value of the slider
+     * @return {Number} The current value of the slider
+     */
+    getValue: function() {
+        //just returns the value of the first thumb, which should be the only one in a single slider
+        return Ext.slider.SingleSlider.superclass.getValue.call(this, 0);
+    },
+
+    /**
+     * Programmatically sets the value of the Slider. Ensures that the value is constrained within
+     * the minValue and maxValue.
+     * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
+     * @param {Boolean} animate Turn on or off animation, defaults to true
+     */
+    setValue: function(value, animate) {
+        var args = Ext.toArray(arguments),
+            len  = args.length;
+
+        //this is to maintain backwards compatiblity for sliders with only one thunb. Usually you must pass the thumb
+        //index to setValue, but if we only have one thumb we inject the index here first if given the multi-slider
+        //signature without the required index. The index will always be 0 for a single slider
+        if (len == 1 || (len <= 3 && typeof arguments[1] != 'number')) {
+            args.unshift(0);
+        }
+
+        return Ext.slider.SingleSlider.superclass.setValue.apply(this, args);
+    },
+
+    /**
+     * Synchronizes the thumb position to the proper proportion of the total component width based
+     * on the current slider {@link #value}.  This will be called automatically when the Slider
+     * is resized by a layout, but if it is rendered auto width, this method can be called from
+     * another resize handler to sync the Slider if necessary.
+     */
+    syncThumb : function() {
+        return Ext.slider.SingleSlider.superclass.syncThumb.apply(this, [0].concat(arguments));
+    },
+    
+    // private
+    getNearest : function(){
+        // Since there's only 1 thumb, it's always the nearest
+        return this.thumbs[0];    
+    }
+});
+
+//backwards compatibility
+Ext.Slider = Ext.slider.SingleSlider;
+
+Ext.reg('slider', Ext.slider.SingleSlider);
+
+// private class to support vertical sliders
+Ext.slider.Vertical = {
+    onResize : function(w, h){
+        this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));
+        this.syncThumb();
+    },
+
+    getRatio : function(){
+        var h = this.innerEl.getHeight(),
+            v = this.maxValue - this.minValue;
+        return h/v;
+    },
+
+    moveThumb: function(index, v, animate) {
+        var thumb = this.thumbs[index],
+            el    = thumb.el;
+
+        if (!animate || this.animate === false) {
+            el.setBottom(v);
+        } else {
+            el.shift({bottom: v, stopFx: true, duration:.35});
+        }
+    },
+
+    onClickChange : function(local) {
+        if (local.left > this.clickRange[0] && local.left < this.clickRange[1]) {
+            var thumb = this.getNearest(local, 'top'),
+                index = thumb.index,
+                value = this.minValue + this.reverseValue(this.innerEl.getHeight() - local.top);
+
+            this.setValue(index, Ext.util.Format.round(value, this.decimalPrecision), undefined, true);
+        }
+    }
+};
+
+//private class to support vertical dragging of thumbs within a slider
+Ext.slider.Thumb.Vertical = {
+    getNewValue: function() {
+        var slider   = this.slider,
+            innerEl  = slider.innerEl,
+            pos      = innerEl.translatePoints(this.tracker.getXY()),
+            bottom   = innerEl.getHeight() - pos.top;
+
+        return slider.minValue + Ext.util.Format.round(bottom / slider.getRatio(), slider.decimalPrecision);
+    }
+};