Show:
                            /**
                             * Adds support for mouse interaction with the Slider rail triggering thumb
                             * movement.
                             *
                             * @module slider
                             * @submodule clickable-rail
                             */
                            
                            /**
                             * Slider extension that allows clicking on the Slider's rail element,
                             * triggering the thumb to align with the location of the click.
                             *
                             * @class ClickableRail
                             */
                            function ClickableRail() {
                                this._initClickableRail();
                            }
                            
                            Y.ClickableRail = Y.mix(ClickableRail, {
                            
                                // Prototype methods added to host class
                                prototype: {
                            
                                    /**
                                     * Initializes the internal state and sets up events.
                                     *
                                     * @method _initClickableRail
                                     * @protected
                                     */
                                    _initClickableRail: function () {
                                        this._evtGuid = this._evtGuid || (Y.guid() + '|');
                            
                                        /**
                                         * Broadcasts when the rail has received a mousedown event and
                                         * triggers the thumb positioning.  Use
                                         * <code>e.preventDefault()</code> or
                                         * <code>set(&quot;clickableRail&quot;, false)</code> to prevent
                                         * the thumb positioning.
                                         *
                                         * @event railMouseDown
                                         * @preventable _defRailMouseDownFn
                                         */
                                        this.publish('railMouseDown', {
                                            defaultFn: this._defRailMouseDownFn
                                        });
                            
                                        this.after('render', this._bindClickableRail);
                                        this.on('destroy', this._unbindClickableRail);
                                    },
                            
                                    /**
                                     * Attaches DOM event subscribers to support rail interaction.
                                     *
                                     * @method _bindClickableRail
                                     * @protected
                                     */
                                    _bindClickableRail: function () {
                                        this._dd.addHandle(this.rail);
                            
                                        this.rail.on(this._evtGuid + Y.DD.Drag.START_EVENT,
                                            Y.bind(this._onRailMouseDown, this));
                                    },
                            
                                    /**
                                     * Detaches DOM event subscribers for cleanup/destruction cycle.
                                     *
                                     * @method _unbindClickableRail
                                     * @protected
                                     */
                                    _unbindClickableRail: function () {
                                        if (this.get('rendered')) {
                                            var contentBox = this.get('contentBox'),
                                                rail = contentBox.one('.' + this.getClassName('rail'));
                            
                                            rail.detach(this.evtGuid + '*');
                                        }
                                    },
                            
                                    /**
                                     * Dispatches the railMouseDown event.
                                     *
                                     * @method _onRailMouseDown
                                     * @param e {DOMEvent} the mousedown event object
                                     * @protected
                                     */
                                    _onRailMouseDown: function (e) {
                                        if (this.get('clickableRail') && !this.get('disabled')) {
                                            this.fire('railMouseDown', { ev: e });
                                            this.thumb.focus();
                                        }
                                    },
                            
                                    /**
                                     * Default behavior for the railMouseDown event.  Centers the thumb at
                                     * the click location and passes control to the DDM to behave as though
                                     * the thumb itself were clicked in preparation for a drag operation.
                                     *
                                     * @method _defRailMouseDownFn
                                     * @param e {Event} the EventFacade for the railMouseDown custom event
                                     * @protected
                                     */
                                    _defRailMouseDownFn: function (e) {
                                        e = e.ev;
                            
                                        // Logic that determines which thumb should be used is abstracted
                                        // to someday support multi-thumb sliders
                                        var dd     = this._resolveThumb(e),
                                            i      = this._key.xyIndex,
                                            length = parseFloat(this.get('length'), 10),
                                            thumb,
                                            thumbSize,
                                            xy;
                            
                                        if (dd) {
                                            thumb = dd.get('dragNode');
                                            thumbSize = parseFloat(thumb.getStyle(this._key.dim), 10);
                            
                                            // Step 1. Allow for aligning to thumb center or edge, etc
                                            xy = this._getThumbDestination(e, thumb);
                            
                                            // Step 2. Remove page offsets to give just top/left style val
                                            xy = xy[ i ] - this.rail.getXY()[i];
                            
                                            // Step 3. Constrain within the rail in case of attempt to
                                            // center the thumb when clicking on the end of the rail
                                            xy = Math.min(
                                                    Math.max(xy, 0),
                                                    (length - thumbSize));
                            
                                            this._uiMoveThumb(xy, { source: 'rail' });
                            
                                            // Set e.target for DD's IE9 patch which calls
                                            // e.target._node.setCapture() to allow imgs to be dragged.
                                            // Without this, setCapture is called from the rail and rail
                                            // clicks on other Sliders may have their thumb movements
                                            // overridden by a different Slider (the thumb on the wrong
                                            // Slider moves).
                                            e.target = this.thumb.one('img') || this.thumb;
                            
                                            // Delegate to DD's natural behavior
                                            dd._handleMouseDownEvent(e);
                            
                                            // TODO: this won't trigger a slideEnd if the rail is clicked
                                            // check if dd._move(e); dd._dragThreshMet = true; dd.start();
                                            // will do the trick.  Is that even a good idea?
                                        }
                                    },
                            
                                    /**
                                     * Resolves which thumb to actuate if any.  Override this if you want to
                                     * support multiple thumbs.  By default, returns the Drag instance for
                                     * the thumb stored by the Slider.
                                     *
                                     * @method _resolveThumb
                                     * @param e {DOMEvent} the mousedown event object
                                     * @return {DD.Drag} the Drag instance that should be moved
                                     * @protected
                                     */
                                    _resolveThumb: function (e) {
                                        /* Temporary workaround
                                        var primaryOnly = this._dd.get('primaryButtonOnly'),
                                            validClick  = !primaryOnly || e.button <= 1;
                            
                                        return (validClick) ? this._dd : null;
                                         */
                                        return this._dd;
                                    },
                            
                                    /**
                                     * Calculates the top left position the thumb should be moved to to
                                     * align the click XY with the center of the specified node.
                                     *
                                     * @method _getThumbDestination
                                     * @param e {DOMEvent} The mousedown event object
                                     * @param node {Node} The node to position
                                     * @return {Array} the [top, left] pixel position of the destination
                                     * @protected
                                     */
                                    _getThumbDestination: function (e, node) {
                                        var offsetWidth  = node.get('offsetWidth'),
                                            offsetHeight = node.get('offsetHeight');
                            
                                        // center
                                        return [
                                            (e.pageX - Math.round((offsetWidth  / 2))),
                                            (e.pageY - Math.round((offsetHeight / 2)))
                                        ];
                                    }
                            
                                },
                            
                                // Static properties added onto host class
                                ATTRS: {
                                    /**
                                     * Enable or disable clickable rail support.
                                     *
                                     * @attribute clickableRail
                                     * @type {Boolean}
                                     * @default true
                                     */
                                    clickableRail: {
                                        value: true,
                                        validator: Y.Lang.isBoolean
                                    }
                                }
                            
                            }, true);