API Docs for: 3.8.0
Show:

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.

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.