# Yahoo! UI Library

### slider 3.1.1

Yahoo! UI Library > slider > SliderBase
Search:
Filters Show Private Show Protected Show Deprecated

## Class SliderBase - extends Widget

Known Subclasses:
  Slider

Create a slider to represent an input control capable of representing a series of intermediate states based on the position of the slider's thumb. These states are typically aligned to a value algorithm whereby the thumb position corresponds to a given value. Sliders may be oriented vertically or horizontally, based on the `axis` configuration.

### Constructor

SliderBase `( config )`

Parameters:
  `config <Object>` Configuration object

### Properties

#### _dd - `protected {DD.Drag}`

The DD.Drag instance linked to the thumb node.

#### _key - `protected {Object}`

Cached fast access map for DOM properties and attributes that pertain to accessing dimensional or positioning information according to the Slider's axis (e.g. "height" vs. "width"). Extension classes should add to this collection for axis related strings if necessary.

#### axis - `protected {String}`

The configured axis, stored for fast lookup since it's a writeOnce attribute. This is for use by extension classes. For implementation code, use `get( "axis" )` for authoritative source. Never write to this property.

#### BOUNDING_TEMPLATE - `{String}`

Bounding box template that will contain the Slider's DOM subtree. <span>s are used to support inline-block styling.
Default Value: <span></span>

#### CONTENT_TEMPLATE - `{String}`

Content box template that will contain the Slider's rail and thumb.
Default Value: <span></span>

#### rail - `{Node}`

The Node instance of the Slider's rail element. Do not write to this property.

#### RAIL_TEMPLATE - `{String}`

Rail template that will contain the end caps and the thumb. {placeholder}s are used for template substitution at render time.
Default Value: <span class="{railClass}"><span class="{railMinCapClass}"></span><span class="{railMaxCapClass}"></span></span>

#### SliderBase.ATTRS - `protected static {Object}`

Static property used to define the default attribute configuration of the Widget.

#### SliderBase.NAME - `protected static String`

The identity of the widget.
Default Value: 'sliderBase'

#### thumb - `{Node}`

The Node instance of the Slider's thumb element. Do not write to this property.

#### THUMB_TEMPLATE - `{String}`

Thumb template that will contain the thumb image and shadow. <img> tags are used instead of background images to avoid a flicker bug in IE. {placeholder}s are used for template substitution at render time.
Default Value: <span class="{thumbClass}" tabindex="-1"><img src="{thumbShadowUrl}" alt="Slider thumb shadow" class="{thumbShadowClass}"><img src="{thumbImageUrl}" alt="Slider thumb" class="{thumbImageClass}"></span>

#### Properties inherited from Attribute:

``

#### Properties inherited from Widget:

`_BIND_UI_ATTRS, _SYNC_UI_ATTRS, BOUNDING_TEMPLATE, CONTENT_TEMPLATE, DEF_PARENT_NODE, DEF_UNIT, UI_EVENTS`

#### Properties inherited from Base:

`name`

### Methods

#### _afterDisabledChange

`protected void _afterDisabledChange ( e )`
Locks or unlocks the thumb.

Parameters:
  `e <Event>` The disabledChange event object

#### _afterDrag

`protected void _afterDrag ( e )`
Dispatches the `thumbMove` event.

Parameters:
  `e <Event>` the `drag:drag` event from the thumb

#### _afterLengthChange

`protected void _afterLengthChange ( e )`
Handles changes to the `length` attribute. By default, it triggers an update to the UI.

Parameters:
  `e <Event>` The lengthChange event object

#### _bindThumbDD

`protected void _bindThumbDD ( )`
Makes the thumb draggable and constrains it to the rail.

#### _bindValueLogic

`protected void _bindValueLogic ( )`
Stub implementation. Override this (presumably in a class extension) to initialize any value logic that depends on the presence of the Drag instance.

#### _initThumbUrl

`protected void _initThumbUrl ( )`

Defaults the thumbURL attribute according to the current skin, or "sam" if none can be determined. Horizontal Sliders will have their `thumbUrl` attribute set to

`"/configured/yui/builddir/slider/assets/skins/sam/thumb-x.png"`

And vertical thumbs will get

`"/configured/yui/builddir/slider/assets/skins/sam/thumb-y.png"`

#### _onDragEnd

`protected void _onDragEnd ( e )`
Dispatches the `slideEnd` event.

Parameters:
  `e <Event>` the `drag:end` event from the thumb

#### _onDragStart

`protected void _onDragStart ( e )`
Dispatches the `slideStart` event.

Parameters:
  `e <Event>` the `drag:start` event from the thumb

#### _setAxis

`protected String _setAxis ( v )`
Validates the axis is "x" or "y" (case insensitive). Converts to lower case for storage.

Parameters:
  `v <String>` proposed value for the axis attribute

Returns: `String`
  lowercased first character of the input string

#### _setLength

`protected String _setLength ( v )`
Ensures the stored length value is a string with a quantity and unit. Unit will be defaulted to "px" if not included. Rejects values less than or equal to 0 and those that don't at least start with a number.

Parameters:
  `v <String>` proposed value for the length attribute

Returns: `String`
  the sanitized value

#### _syncThumbPosition

`protected void _syncThumbPosition ( )`
Stub implementation. Override this (presumably in a class extension) to ensure the thumb is in the correct position according to the value alogorithm. instance.

#### _uiMoveThumb

`protected void _uiMoveThumb ( offset )`
Moves the thumb to pixel offset position along the rail.

Parameters:
  `offset <Number>` the pixel offset to set as left or top style

#### _uiSetRailLength

`protected void _uiSetRailLength ( length )`
Sets the rail length according to the `length` attribute.

Parameters:
  `length <String>` the length to apply to the rail style

#### bindUI

`protected void bindUI ( )`
Creates the Y.DD.Drag instance used to handle the thumb movement and binds Slider interaction to the configured value model.

#### initializer

`protected void initializer ( )`
Construction logic executed during Slider instantiation.

#### renderRail

`Node renderRail ( )`
Creates the Slider rail DOM subtree for insertion into the Slider's `contentBox`. Override this method if you want to provide the rail element (presumably from existing markup).

Returns: `Node`
  the rail node subtree

#### renderThumb

`Node renderThumb ( )`
Creates the Slider thumb DOM subtree for insertion into the Slider's rail. Override this method if you want to provide the thumb element (presumably from existing markup).

Returns: `Node`
  the thumb node subtree

#### renderUI

`protected void renderUI ( )`
Create the DOM structure for the Slider.

#### syncUI

`void syncUI ( )`
Synchronizes the DOM state with the attribute settings.

#### Methods inherited from EventTarget:

`_getType, _monitor, _parseType, addTarget, after, before, bubble, detach, detachAll, fire, getEvent, getTargets, on, once, publish, removeTarget, subscribe, unsubscribe, unsubscribeAll`

#### Methods inherited from Attribute:

`_addAttrs, _addLazyAttr, _defAttrChangeFn, _fireAttrChange, _getAttr, _getAttrInitVal, _getAttrs, _getStateVal, _isLazyAttr, _normAttrVals, _protectAttrs, _set, _setAttr, _setAttrs, _setAttrVal, _setStateVal, addAttr, addAttrs, attrAdded, get, getAttrs, modifyAttr, removeAttr, reset, set, setAttrs`

#### Methods inherited from Widget:

`_applyParsedConfig, _applyParser, _bindAttrUI, _bindDOM, _bindUI, _createUIEvent, _defaultCB, _defRenderFn, _getHtmlParser, _getSrcNode, _getStrings, _getUIEventNode, _guid, _initUIEvent, _isUIEvent, _onDocFocus, _onDocMouseDown, _removeLoadingClassNames, _renderBox, _renderBoxClassNames, _renderUI, _setAttrUI, _setBB, _setBox, _setCB, _setStrings, _strSetter, _syncAttrUI, _syncUI, _uiSetDim, _uiSetDisabled, _uiSetFocused, _uiSetHeight, _uiSetTabIndex, _uiSetVisible, _uiSetWidth, _uiSizeCB, _unbindDOM, _unbindUI, _validTabIndex, bindUI, blur, destructor, disable, enable, focus, getClassName, getDefaultLocale, getSkinName, getString, getStrings, hide, initializer, render, renderer, renderUI, show, syncUI, toString`

#### Methods inherited from Base:

`_aggregateAttrs, _defDestroyFn, _defInitFn, _destroyHierarchy, _filterAttrCfs, _getAttrCfgs, _getClasses, _initHierarchy, _initHierarchyData, _preInitEventCfg, destroy, init, toString`

#### Methods inherited from Plugin.Host:

`_destroyPlugins, _initPlugins, _plug, _unplug, hasPlugin, plug, unplug`

### Events

#### axisChange

`axisChange ( event )`
Fires when the value for the configuration attribute 'axis' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### lengthChange

`lengthChange ( event )`
Fires when the value for the configuration attribute 'length' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### slideStart

`slideStart ( event )`
Signals the beginning of a thumb drag operation. Payload includes the thumb's drag:start event.

Parameters:
  `event <Event>` The event object for the slideStart with the following extra properties:
  ddEvent
    `drag:start` event from the thumb

#### thumbMove

`thumbMove ( event )`
Signals that the thumb has moved. Payload includes the thumb's pixel offset from the top/left edge of the rail, and if triggered by dragging the thumb, the `drag:drag` event.

Parameters:
  `event <Event>` The event object for the thumbMove with the following extra properties:
  offset
    Pixel offset from top/left of the slider to the new thumb position
  ddEvent
    `drag:drag` event from the thumb

#### thumbUrlChange

`thumbUrlChange ( event )`
Fires when the value for the configuration attribute 'thumbUrl' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### Events inherited from Widget:

`boundingBoxChange, contentBoxChange, disabledChange, focusedChange, heightChange, idChange, localeChange, renderChange, renderedChange, srcNodeChange, stringsChange, tabIndexChange, visibleChange, widget:contentUpdate, widget:render, widthChange,`

#### Events inherited from Base:

`destroy, destroyedChange, init, initializedChange,`

### Configuration Attributes

#### axis `- writeonce {String}`

Axis upon which the Slider's thumb moves. "x" for horizontal, "y" for vertical.
Default Value: "x"

#### length `- {String | Number} e.g. "200px", "6em", or 200 (defaults to px)`

The length of the rail (exclusive of the end caps if positioned by CSS). This corresponds to the movable range of the thumb.
Default Value: 150px

#### thumbUrl `- {String}`

Path to the thumb image. This will be used as both the thumb and shadow as a sprite. Defaults at render() to thumb-x.png or thumb-y.png in the skin directory of the current skin.
Default Value: thumb-x.png or thumb-y.png in the sam skin directory of the current build path for Slider

#### Configuration attributes inherited from Widget:

`boundingBox, contentBox, disabled, focused, height, id, locale render rendered srcNode strings tabIndex visible width`

#### Configuration attributes inherited from Base:

`destroyed initialized`

Copyright © 2010 Yahoo! Inc. All rights reserved.