#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# ClickableRail Class

Defined in: `slider/js/clickable-rail.js:9`
Module: clickable-rail
Parent Module: slider

Slider extension that allows clicking on the Slider's rail element, triggering the thumb to align with the location of the click.

- Index
- Methods
- Attributes
- Events

## Item Index

### Methods

- _bindClickableRail
- _defRailMouseDownFn
- _getThumbDestination
- _initClickableRail
- _onRailMouseDown
- _resolveThumb
- _unbindClickableRail

### Attributes

- clickableRail

### Events

- railMouseDown

## Methods

### `_bindClickableRail`

() protected

Defined in `slider/js/clickable-rail.js:51`

Attaches DOM event subscribers to support rail interaction.

### `_defRailMouseDownFn`

(

- `e`

)
protected

Defined in `slider/js/clickable-rail.js:93`

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.

#### Parameters:

- `e` Event

  the EventFacade for the railMouseDown custom event

### `_getThumbDestination`

(

- `e`
- `node`

)
Array protected

Defined in `slider/js/clickable-rail.js:169`

Calculates the top left position the thumb should be moved to to align the click XY with the center of the specified node.

#### Parameters:

- `e` DOMEvent

  The mousedown event object

- `node` Node

  The node to position

#### Returns:

Array: the [top, left] pixel position of the destination

### `_initClickableRail`

() protected

Defined in `slider/js/clickable-rail.js:24`

Initializes the internal state and sets up events.

### `_onRailMouseDown`

(

- `e`

)
protected

Defined in `slider/js/clickable-rail.js:79`

Dispatches the railMouseDown event.

#### Parameters:

- `e` DOMEvent

  the mousedown event object

### `_resolveThumb`

(

- `e`

)
DD.Drag protected

Defined in `slider/js/clickable-rail.js:149`

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.

#### Parameters:

- `e` DOMEvent

  the mousedown event object

#### Returns:

DD.Drag: the Drag instance that should be moved

### `_unbindClickableRail`

() protected

Defined in `slider/js/clickable-rail.js:64`

Detaches DOM event subscribers for cleanup/destruction cycle.

## Attributes

### `clickableRail`

Boolean

Defined in `slider/js/clickable-rail.js:194`

Enable or disable clickable rail support.

Default: true

#### Fires event `clickableRailChange`

Fires when the value for the configuration attribute `clickableRail` 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:

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

## Events

### `railMouseDown`

Defined in `slider/js/clickable-rail.js:33`

Broadcasts when the rail has received a mousedown event and triggers the thumb positioning. Use `e.preventDefault()` or `set("clickableRail", false)` to prevent the thumb positioning.