lib/yuilib/3.13.0/slider-base/slider-base-debug.js

   1 /*
   2 YUI 3.13.0 (build 508226d)
   3 Copyright 2013 Yahoo! Inc. All rights reserved.
   4 Licensed under the BSD License.
   5 http://yuilibrary.com/license/
   6 */
   7
   8 YUI.add('slider-base', function (Y, NAME) {
   9
  10 /**
  11  * Create a sliding value range input visualized as a draggable thumb on a
  12  * background element.
  13  *
  14  * @module slider
  15  * @submodule slider-base
  16  */
  17
  18 var INVALID_VALUE = Y.Attribute.INVALID_VALUE;
  19
  20 /**
  21  * Create a slider to represent an input control capable of representing a
  22  * series of intermediate states based on the position of the slider's thumb.
  23  * These states are typically aligned to a value algorithm whereby the thumb
  24  * position corresponds to a given value. Sliders may be oriented vertically or
  25  * horizontally, based on the <code>axis</code> configuration.
  26  *
  27  * @class SliderBase
  28  * @extends Widget
  29  * @param config {Object} Configuration object
  30  * @constructor
  31  */
  32 function SliderBase() {
  33     SliderBase.superclass.constructor.apply( this, arguments );
  34 }
  35
  36 Y.SliderBase = Y.extend( SliderBase, Y.Widget, {
  37
  38     // Y.Slider prototype
  39
  40     /**
  41      * Construction logic executed during Slider instantiation.
  42      *
  43      * @method initializer
  44      * @protected
  45      */
  46     initializer : function () {
  47         /**
  48          * The configured axis, stored for fast lookup since it's a writeOnce
  49          * attribute.  This is for use by extension classes.  For
  50          * implementation code, use <code>get( &quot;axis&quot; )</code> for
  51          * authoritative source.  Never write to this property.
  52          *
  53          * @property axis
  54          * @type {String}
  55          * @protected
  56          */
  57         this.axis = this.get( 'axis' );
  58
  59         /**
  60          * Cached fast access map for DOM properties and attributes that
  61          * pertain to accessing dimensional or positioning information
  62          * according to the Slider's axis (e.g. &quot;height&quot; vs.
  63          * &quot;width&quot;).  Extension classes should add to this collection
  64          * for axis related strings if necessary.
  65          *
  66          * @property _key
  67          * @type {Object}
  68          * @protected
  69          */
  70         this._key = {
  71             dim    : ( this.axis === 'y' ) ? 'height' : 'width',
  72             minEdge: ( this.axis === 'y' ) ? 'top'    : 'left',
  73             maxEdge: ( this.axis === 'y' ) ? 'bottom' : 'right',
  74             xyIndex: ( this.axis === 'y' ) ? 1 : 0
  75         };
  76
  77         /**
  78          * Signals that the thumb has moved.  Payload includes the thumb's
  79          * pixel offset from the top/left edge of the rail, and if triggered by
  80          * dragging the thumb, the <code>drag:drag</code> event.
  81          *
  82          * @event thumbMove
  83          * @param event {Event} The event object for the thumbMove with the
  84          *                      following extra properties:
  85          *  <dl>
  86          *      <dt>offset</dt>
  87          *          <dd>Pixel offset from top/left of the slider to the new
  88          *          thumb position</dd>
  89          *      <dt>ddEvent (deprecated)</dt>
  90          *          <dd><code>drag:drag</code> event from the thumb</dd>
  91          *      <dt>originEvent</dt>
  92          *          <dd><code>drag:drag</code> event from the thumb</dd>
  93          *  </dl>
  94          */
  95         this.publish( 'thumbMove', {
  96             defaultFn: this._defThumbMoveFn,
  97             queuable : true
  98         } );
  99     },
 100
 101     /**
 102      * Create the DOM structure for the Slider.
 103      *
 104      * @method renderUI
 105      * @protected
 106      */
 107     renderUI : function () {
 108         var contentBox = this.get( 'contentBox' );
 109
 110         /**
 111          * The Node instance of the Slider's rail element.  Do not write to
 112          * this property.
 113          *
 114          * @property rail
 115          * @type {Node}
 116          */
 117         this.rail = this.renderRail();
 118
 119         this._uiSetRailLength( this.get( 'length' ) );
 120
 121         /**
 122          * The Node instance of the Slider's thumb element.  Do not write to
 123          * this property.
 124          *
 125          * @property thumb
 126          * @type {Node}
 127          */
 128         this.thumb = this.renderThumb();
 129
 130         this.rail.appendChild( this.thumb );
 131         // @TODO: insert( contentBox, 'replace' ) or setHTML?
 132         contentBox.appendChild( this.rail );
 133
 134         // <span class="yui3-slider-x">
 135         contentBox.addClass( this.getClassName( this.axis ) );
 136     },
 137
 138     /**
 139      * Creates the Slider rail DOM subtree for insertion into the Slider's
 140      * <code>contentBox</code>.  Override this method if you want to provide
 141      * the rail element (presumably from existing markup).
 142      *
 143      * @method renderRail
 144      * @return {Node} the rail node subtree
 145      */
 146     renderRail: function () {
 147         var minCapClass = this.getClassName( 'rail', 'cap', this._key.minEdge ),
 148             maxCapClass = this.getClassName( 'rail', 'cap', this._key.maxEdge );
 149
 150         return Y.Node.create(
 151             Y.Lang.sub( this.RAIL_TEMPLATE, {
 152                 railClass      : this.getClassName( 'rail' ),
 153                 railMinCapClass: minCapClass,
 154                 railMaxCapClass: maxCapClass
 155             } ) );
 156     },
 157
 158     /**
 159      * Sets the rail length according to the <code>length</code> attribute.
 160      *
 161      * @method _uiSetRailLength
 162      * @param length {String} the length to apply to the rail style
 163      * @protected
 164      */
 165     _uiSetRailLength: function ( length ) {
 166         this.rail.setStyle( this._key.dim, length );
 167     },
 168
 169     /**
 170      * Creates the Slider thumb DOM subtree for insertion into the Slider's
 171      * rail.  Override this method if you want to provide the thumb element
 172      * (presumably from existing markup).
 173      *
 174      * @method renderThumb
 175      * @return {Node} the thumb node subtree
 176      */
 177     renderThumb: function () {
 178         this._initThumbUrl();
 179
 180         var imageUrl = this.get( 'thumbUrl' );
 181
 182         return Y.Node.create(
 183             Y.Lang.sub( this.THUMB_TEMPLATE, {
 184                 thumbClass      : this.getClassName( 'thumb' ),
 185                 thumbShadowClass: this.getClassName( 'thumb', 'shadow' ),
 186                 thumbImageClass : this.getClassName( 'thumb', 'image' ),
 187                 thumbShadowUrl  : imageUrl,
 188                 thumbImageUrl   : imageUrl,
 189                 thumbAriaLabelId: this.getClassName( 'label', Y.guid()) // get unique id for specifying a label for ARIA
 190             } ) );
 191     },
 192
 193     /**
 194      * Gives focus to the thumb enabling keyboard access after clicking thumb
 195      *
 196      * @method _onThumbClick
 197      * @protected
 198      */
 199     _onThumbClick : function(e){
 200         this.thumb.focus();
 201     },
 202
 203
 204     /**
 205      * Creates the Y.DD.Drag instance used to handle the thumb movement and
 206      * binds Slider interaction to the configured value model.
 207      *
 208      * @method bindUI
 209      * @protected
 210      */
 211     bindUI : function () {
 212
 213         // Begin keyboard listeners ///////////////////////////////
 214         var boundingBox = this.get("boundingBox"), //Y.one('body'),
 215         // Looking for a key event which will fire continously across browsers while the key is held down.
 216         keyEvent = (!Y.UA.opera) ? "down:" : "press:",
 217         // 38, 40 = arrow up/down, 33, 34 = page up/down,  35 , 36 = end/home
 218         keyEventSpec = keyEvent + "38,40,33,34,35,36",
 219         // 37 , 39 = arrow left/right
 220         keyLeftRightSpec = keyEvent + "37,39",
 221         // 37 , 39 = arrow left/right + meta (command/apple key) for mac
 222         keyLeftRightSpecMeta = keyEvent + "37+meta,39+meta";
 223
 224         boundingBox.on("key", this._onDirectionKey, keyEventSpec, this);
 225         boundingBox.on("key", this._onLeftRightKey, keyLeftRightSpec, this);
 226         boundingBox.on("key", this._onLeftRightKeyMeta, keyLeftRightSpecMeta, this);
 227         // End keyboard listeners //////////////////////////////////
 228
 229         this.thumb.on('click', this._onThumbClick, this);
 230
 231         this._bindThumbDD();
 232
 233         this._bindValueLogic();
 234
 235         this.after( 'disabledChange', this._afterDisabledChange );
 236         this.after( 'lengthChange',   this._afterLengthChange );
 237
 238     },
 239
 240     /**
 241      * increments Slider value by a minor increment
 242      *
 243      * @method _incrMinor
 244      * @protected
 245      */
 246     _incrMinor : function(){
 247         this.set('value', (this.get('value') + this.get('minorStep')));
 248     },
 249
 250     /**
 251      * decrements Slider value by a minor increment
 252      *
 253      * @method _decrMinor
 254      * @protected
 255      */
 256     _decrMinor : function(){
 257         this.set('value', (this.get('value') - this.get('minorStep')));
 258     },
 259
 260     /**
 261      * increments Slider value by a major increment
 262      *
 263      * @method _incrMajor
 264      * @protected
 265      */
 266     _incrMajor : function(){
 267         this.set('value', (this.get('value') + this.get('majorStep')));
 268     },
 269
 270     /**
 271      * decrements Slider value by a major increment
 272      *
 273      * @method _decrMajor
 274      * @protected
 275      */
 276     _decrMajor : function(){
 277         this.set('value', (this.get('value') - this.get('majorStep')));
 278     },
 279
 280     /**
 281      * sets the Slider value to the min value.
 282      *
 283      * @method _setToMin
 284      * @protected
 285      */
 286     _setToMin : function(e){
 287         this.set('value', this.get('min'));
 288     },
 289
 290     /**
 291      * sets the Slider value to the max value.
 292      *
 293      * @method _setToMax
 294      * @protected
 295      */
 296     _setToMax : function(e){
 297         this.set('value', this.get('max'));
 298     },
 299
 300     /**
 301      * sets the Slider's value in response to key events.
 302      * Left and right keys are in a separate method
 303      * in case an implementation wants to increment values
 304      * but needs left and right arrow keys for other purposes.
 305      *
 306      * @method _onDirectionKey
 307      * @param e {Event} the key event
 308      * @protected
 309      */
 310     _onDirectionKey : function(e) {
 311         e.preventDefault();
 312         if(this.get('disabled') === false){
 313             switch (e.charCode) {
 314                 case 38: // up
 315                     this._incrMinor();
 316                     break;
 317                 case 40: // down
 318                     this._decrMinor();
 319                     break;
 320                 case 36: // home
 321                     this._setToMin();
 322                     break;
 323                 case 35: // end
 324                     this._setToMax();
 325                     break;
 326                 case 33: // page up
 327                     this._incrMajor();
 328                     break;
 329                 case 34: // page down
 330                     this._decrMajor();
 331                     break;
 332             }
 333         }
 334     },
 335
 336     /**
 337      * sets the Slider's value in response to left or right key events
 338      *
 339      * @method _onLeftRightKey
 340      * @param e {Event} the key event
 341      * @protected
 342      */
 343     _onLeftRightKey : function(e) {
 344         e.preventDefault();
 345         if(this.get('disabled') === false){
 346             switch (e.charCode) {
 347                 case 37: // left
 348                     this._decrMinor();
 349                     break;
 350                 case 39: // right
 351                     this._incrMinor();
 352                     break;
 353             }
 354         }
 355     },
 356
 357     /**
 358      * sets the Slider's value in response to left or right key events when a meta (mac command/apple) key is also pressed
 359      *
 360      * @method _onLeftRightKeyMeta
 361      * @param e {Event} the key event
 362      * @protected
 363      */
 364     _onLeftRightKeyMeta : function(e) {
 365         e.preventDefault();
 366         if(this.get('disabled') === false){
 367             switch (e.charCode) {
 368                 case 37: // left + meta
 369                     this._setToMin();
 370                     break;
 371                 case 39: // right + meta
 372                     this._setToMax();
 373                     break;
 374             }
 375         }
 376     },
 377
 378
 379
 380
 381
 382     /**
 383      * Makes the thumb draggable and constrains it to the rail.
 384      *
 385      * @method _bindThumbDD
 386      * @protected
 387      */
 388     _bindThumbDD: function () {
 389         var config = { constrain: this.rail };
 390
 391         // { constrain: rail, stickX: true }
 392         config[ 'stick' + this.axis.toUpperCase() ] = true;
 393
 394         /**
 395          * The DD.Drag instance linked to the thumb node.
 396          *
 397          * @property _dd
 398          * @type {DD.Drag}
 399          * @protected
 400          */
 401         this._dd = new Y.DD.Drag( {
 402             node   : this.thumb,
 403             bubble : false,
 404             on     : {
 405                 'drag:start': Y.bind( this._onDragStart, this )
 406             },
 407             after  : {
 408                 'drag:drag': Y.bind( this._afterDrag,    this ),
 409                 'drag:end' : Y.bind( this._afterDragEnd, this )
 410             }
 411         } );
 412
 413         // Constrain the thumb to the rail
 414         this._dd.plug( Y.Plugin.DDConstrained, config );
 415     },
 416
 417     /**
 418      * Stub implementation.  Override this (presumably in a class extension) to
 419      * initialize any value logic that depends on the presence of the Drag
 420      * instance.
 421      *
 422      * @method _bindValueLogic
 423      * @protected
 424      */
 425     _bindValueLogic: function () {},
 426
 427     /**
 428      * Moves the thumb to pixel offset position along the rail.
 429      *
 430      * @method _uiMoveThumb
 431      * @param offset {Number} the pixel offset to set as left or top style
 432      * @param [options] {Object} Details to send with the `thumbMove` event
 433      * @protected
 434      */
 435     _uiMoveThumb: function ( offset, options ) {
 436         if ( this.thumb ) {
 437             this.thumb.setStyle( this._key.minEdge, offset + 'px' );
 438
 439             Y.log("Setting thumb " + this._key.minEdge + " to " + offset + "px","info","slider");
 440
 441             options || (options = {});
 442             options.offset = offset;
 443
 444             this.fire( 'thumbMove', options );
 445         }
 446     },
 447
 448     /**
 449      * Dispatches the <code>slideStart</code> event.
 450      *
 451      * @method _onDragStart
 452      * @param e {Event} the <code>drag:start</code> event from the thumb
 453      * @protected
 454      */
 455     _onDragStart: function ( e ) {
 456         /**
 457          * Signals the beginning of a thumb drag operation.  Payload includes
 458          * the thumb's drag:start event.
 459          *
 460          * @event slideStart
 461          * @param event {Event} The event object for the slideStart with the
 462          *                      following extra properties:
 463          *  <dl>
 464          *      <dt>ddEvent (deprecated)</dt>
 465          *          <dd><code>drag:start</code> event from the thumb</dd>
 466          *      <dt>originEvent</dt>
 467          *          <dd><code>drag:start</code> event from the thumb</dd>
 468          *  </dl>
 469          */
 470         this.fire('slideStart', {
 471            ddEvent: e, // for backward compatibility
 472            originEvent: e
 473         });
 474     },
 475
 476     /**
 477      * Dispatches the <code>thumbMove</code> event.
 478      *
 479      * @method _afterDrag
 480      * @param e {Event} the <code>drag:drag</code> event from the thumb
 481      * @protected
 482      */
 483     _afterDrag: function ( e ) {
 484         var thumbXY = e.info.xy[ this._key.xyIndex ],
 485             railXY  = e.target.con._regionCache[ this._key.minEdge ];
 486
 487         Y.log("Thumb position: " + thumbXY + ", Rail position: " + railXY, "info", "slider");
 488         this.fire( 'thumbMove', {
 489             offset : (thumbXY - railXY),
 490             ddEvent: e, // for backward compatibility
 491             originEvent: e
 492         } );
 493     },
 494
 495     /**
 496      * Dispatches the <code>slideEnd</code> event.
 497      *
 498      * @method _onDragEnd
 499      * @param e {Event} the <code>drag:end</code> event from the thumb
 500      * @protected
 501      */
 502     _afterDragEnd: function ( e ) {
 503         /**
 504          * Signals the end of a thumb drag operation.  Payload includes
 505          * the thumb's drag:end event.
 506          *
 507          * @event slideEnd
 508          * @param event {Event} The event object for the slideEnd with the
 509          *                      following extra properties:
 510          *  <dl>
 511          *      <dt>ddEvent (deprecated)</dt>
 512          *          <dd><code>drag:end</code> event from the thumb</dd>
 513          *      <dt>originEvent</dt>
 514          *          <dd><code>drag:end</code> event from the thumb</dd>
 515          *  </dl>
 516          */
 517         this.fire('slideEnd', {
 518             ddEvent: e,
 519             originEvent: e
 520         });
 521     },
 522
 523     /**
 524      * Locks or unlocks the thumb.
 525      *
 526      * @method _afterDisabledChange
 527      * @param e {Event} The disabledChange event object
 528      * @protected
 529      */
 530     _afterDisabledChange: function ( e ) {
 531         this._dd.set( 'lock', e.newVal );
 532     },
 533
 534     /**
 535      * Handles changes to the <code>length</code> attribute.  By default, it
 536      * triggers an update to the UI.
 537      *
 538      * @method _afterLengthChange
 539      * @param e {Event} The lengthChange event object
 540      * @protected
 541      */
 542     _afterLengthChange: function ( e ) {
 543         if ( this.get( 'rendered' ) ) {
 544             this._uiSetRailLength( e.newVal );
 545
 546             this.syncUI();
 547         }
 548     },
 549
 550     /**
 551      * Synchronizes the DOM state with the attribute settings.
 552      *
 553      * @method syncUI
 554      */
 555     syncUI : function () {
 556         this._dd.con.resetCache();
 557
 558         this._syncThumbPosition();
 559
 560         // Forces a reflow of the bounding box to address IE8 inline-block
 561         // container not expanding correctly. bug 2527905
 562         //this.get('boundingBox').toggleClass('');
 563         this.thumb.set('aria-valuemin', this.get('min'));
 564         this.thumb.set('aria-valuemax', this.get('max'));
 565
 566         this._dd.set('lock', this.get('disabled'));
 567     },
 568
 569     /**
 570      * Stub implementation.  Override this (presumably in a class extension) to
 571      * ensure the thumb is in the correct position according to the value
 572      * alogorithm.
 573      * instance.
 574      *
 575      * @method _syncThumbPosition
 576      * @protected
 577      */
 578     _syncThumbPosition: function () {},
 579
 580     /**
 581      * Validates the axis is &quot;x&quot; or &quot;y&quot; (case insensitive).
 582      * Converts to lower case for storage.
 583      *
 584      * @method _setAxis
 585      * @param v {String} proposed value for the axis attribute
 586      * @return {String} lowercased first character of the input string
 587      * @protected
 588      */
 589     _setAxis : function (v) {
 590         v = ( v + '' ).toLowerCase();
 591
 592         return ( v === 'x' || v === 'y' ) ? v : INVALID_VALUE;
 593     },
 594
 595     /**
 596      * <p>Ensures the stored length value is a string with a quantity and unit.
 597      * Unit will be defaulted to &quot;px&quot; if not included.  Rejects
 598      * values less than or equal to 0 and those that don't at least start with
 599      * a number.</p>
 600      *
 601      * <p>Currently only pixel lengths are supported.</p>
 602      *
 603      * @method _setLength
 604      * @param v {String} proposed value for the length attribute
 605      * @return {String} the sanitized value
 606      * @protected
 607      */
 608     _setLength: function ( v ) {
 609         v = ( v + '' ).toLowerCase();
 610
 611         var length = parseFloat( v, 10 ),
 612             units  = v.replace( /[\d\.\-]/g, '' ) || this.DEF_UNIT;
 613
 614         return length > 0 ? ( length + units ) : INVALID_VALUE;
 615     },
 616
 617     /**
 618      * <p>Defaults the thumbURL attribute according to the current skin, or
 619      * &quot;sam&quot; if none can be determined.  Horizontal Sliders will have
 620      * their <code>thumbUrl</code> attribute set to</p>
 621      * <p><code>&quot;/<em>configured</em>/<em>yu</em>i/<em>builddi</em>r/slider-base/assets/skins/sam/thumb-x.png&quot;</code></p>
 622      * <p>And vertical thumbs will get</p>
 623      * <p><code>&quot;/<em>configured</em>/<em>yui</em>/<em>builddir</em>/slider-base/assets/skins/sam/thumb-y.png&quot;</code></p>
 624      *
 625      * @method _initThumbUrl
 626      * @protected
 627      */
 628     _initThumbUrl: function () {
 629         if (!this.get('thumbUrl')) {
 630             var skin = this.getSkinName() || 'sam',
 631                 base = Y.config.base;
 632
 633             // Unfortunate hack to avoid requesting image resources from the
 634             // combo service.  The combo service does not serve images.
 635             if (base.indexOf('http://yui.yahooapis.com/combo') === 0) {
 636                 base = 'http://yui.yahooapis.com/' + Y.version + '/build/';
 637             }
 638
 639             // <img src="/path/to/build/slider-base/assets/skins/sam/thumb-x.png">
 640             this.set('thumbUrl', base + 'slider-base/assets/skins/' +
 641                                  skin + '/thumb-' + this.axis + '.png');
 642
 643         }
 644     },
 645
 646     /**
 647      * Bounding box template that will contain the Slider's DOM subtree.  &lt;span&gt;s are used to support inline-block styling.
 648      *
 649      * @property BOUNDING_TEMPLATE
 650      * @type {String}
 651      * @default &lt;span>&lt;/span>
 652      */
 653     BOUNDING_TEMPLATE : '<span></span>',
 654
 655     /**
 656      * Content box template that will contain the Slider's rail and thumb.
 657      *
 658      * @property CONTENT_TEMPLATE
 659      * @type {String}
 660      * @default &lt;span>&lt;/span>
 661      */
 662     CONTENT_TEMPLATE  : '<span></span>',
 663
 664     /**
 665      * Rail template that will contain the end caps and the thumb.
 666      * {placeholder}s are used for template substitution at render time.
 667      *
 668      * @property RAIL_TEMPLATE
 669      * @type {String}
 670      * @default &lt;span class="{railClass}">&lt;span class="{railMinCapClass}">&lt;/span>&lt;span class="{railMaxCapClass}">&lt;/span>&lt;/span>
 671      */
 672     RAIL_TEMPLATE     : '<span class="{railClass}">' +
 673                             '<span class="{railMinCapClass}"></span>' +
 674                             '<span class="{railMaxCapClass}"></span>' +
 675                         '</span>',
 676
 677     /**
 678      * Thumb template that will contain the thumb image and shadow. &lt;img>
 679      * tags are used instead of background images to avoid a flicker bug in IE.
 680      * {placeholder}s are used for template substitution at render time.
 681      *
 682      * @property THUMB_TEMPLATE
 683      * @type {String}
 684      * @default &lt;span class="{thumbClass}" tabindex="-1">&lt;img src="{thumbShadowUrl}" alt="Slider thumb shadow" class="{thumbShadowClass}">&lt;img src="{thumbImageUrl}" alt="Slider thumb" class="{thumbImageClass}">&lt;/span>
 685      */
 686     THUMB_TEMPLATE    : '<span class="{thumbClass}" aria-labelledby="{thumbAriaLabelId}" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0">' +   // keyboard access jeff     tabindex="-1"
 687                             '<img src="{thumbShadowUrl}" ' +
 688                                 'alt="Slider thumb shadow" ' +
 689                                 'class="{thumbShadowClass}">' +
 690                             '<img src="{thumbImageUrl}" ' +
 691                                 'alt="Slider thumb" ' +
 692                                 'class="{thumbImageClass}">' +
 693                         '</span>'
 694
 695 }, {
 696
 697     // Y.SliderBase static properties
 698
 699     /**
 700      * The identity of the widget.
 701      *
 702      * @property NAME
 703      * @type String
 704      * @default 'sliderBase'
 705      * @readOnly
 706      * @protected
 707      * @static
 708      */
 709     NAME : 'sliderBase',
 710
 711     /**
 712      * Static property used to define the default attribute configuration of
 713      * the Widget.
 714      *
 715      * @property ATTRS
 716      * @type {Object}
 717      * @protected
 718      * @static
 719      */
 720     ATTRS : {
 721
 722         /**
 723          * Axis upon which the Slider's thumb moves.  &quot;x&quot; for
 724          * horizontal, &quot;y&quot; for vertical.
 725          *
 726          * @attribute axis
 727          * @type {String}
 728          * @default &quot;x&quot;
 729          * @writeOnce
 730          */
 731         axis : {
 732             value     : 'x',
 733             writeOnce : true,
 734             setter    : '_setAxis',
 735             lazyAdd   : false
 736         },
 737
 738         /**
 739          * The length of the rail (exclusive of the end caps if positioned by
 740          * CSS).  This corresponds to the movable range of the thumb.
 741          *
 742          * @attribute length
 743          * @type {String | Number} e.g. "200px" or 200
 744          * @default 150px
 745          */
 746         length: {
 747             value: '150px',
 748             setter: '_setLength'
 749         },
 750
 751         /**
 752          * Path to the thumb image.  This will be used as both the thumb and
 753          * shadow as a sprite.  Defaults at render() to thumb-x.png or
 754          * thumb-y.png in the skin directory of the current skin.
 755          *
 756          * @attribute thumbUrl
 757          * @type {String}
 758          * @default thumb-x.png or thumb-y.png in the sam skin directory of the
 759          *          current build path for Slider
 760          */
 761         thumbUrl: {
 762             value: null,
 763             validator: Y.Lang.isString
 764         }
 765     }
 766 });
 767
 768
 769 }, '3.13.0', {"requires": ["widget", "dd-constrain", "event-key"], "skinnable": true});