Status:

Angular 2 directive that turn element to slider handle.

This directive is used by Angular 2 Slider Component

• Dependencies
• Install
• Usage
  • Directive
  • Events
  • Interfaces
  • CallBacks

• Angular 2
• Styled Directive npm install ng2-styled-directive

You can get it on npm.

npm install ng2-slideable-directive

<div id="range-slider-container">
    <div class="ui-slider-range" style="left: 0%; width: 100%;"></div>
    <span slideAble
          slideDirection="horisontal"
          dynamicRightLimit="right-handle"
          (onStopSliding)="stopSlidingHandler($event)"
          (onSliding)="slidingHandler($event)"
          step="20"
          id="left-handle"
          class="ui-slider-handle"
          style="left: 0%;"></span>
    <span slideAble
          slideDirection="horisontal"
          dynamicLeftLimit="left-handle"
          (onStopSliding)="stopSlidingHandler($event)"
          (onSliding)="slidingHandler($event)"
          step="20"
          id="right-handle"
          class="ui-slider-handle"
          style="left: 100%;"></span>
</div>

The slideable directive makes DOM-element as slideable

The slideDirection attribute set a type of sliding.

Possible values: horisontal, vertical, both

Default value: both

This attribute specify ID of element wich edges will be edges of sliding area

Value: id of DOM-elemnt

If this attribute is not defined, current parent of sliding element became bounding element

Default value: parent

This attributes set any edge separately. This attributes override boundElement attribute.

Value format: elementId:side, where elementId is ID of DOM-element and side can be valued as left, right, top, bottom, center-x or center-y

<span slideAble
      boundElement="container"
      leftEdge="object1:left"
      topEdge="object2:center-y">
</span>

In this example sliding area will have follow edges - at left it will be left edge of element with ID object1, at right it will be right edge of element with ID container, at top it will be vertical center of element with ID object2 and at bottom it will be bottom edge of element with ID container

Potentially you may need dynamically changed edge(s) - for example in range slider left handle can't be the right of right handle, but right handle have dynamical position.

In these cases dynamic****Limit will help you. Format is the same as in ****Edge attributes.

This attribute specify step of sliding in pixels

Default value: "1"

This attributes set styles of slideable element in normal and sliding modes

<span slideAble
      boundElement="container"
      [normalStyle]="{ 'background-color': 'green'}"
      [slidingStyle]="{
            'border-radius': '9px',
            'background-color': 'red'
      }"
</span>

Event onInit generated during initialisation of directive (ngOnInit)

Return object - implementation of interface IEventSlideAble

Event onStartSliding generated when mouse button was pressed and slideable element start to slide,

Event onSliding generated during slideable element slides

Event onStopSliding generated when slideable element stoped to slide, mouse button was released

Events objects of SlideAbleDirective implements this interface

Interface properties:

type: string - type of event ('init', 'sliding', 'stop')

boundingRect: ClientRect - result of standart DOM-document function getBoundingClientRect(), edges of slideable element

relativePercentHorisontal: number - relative horisontal position of sliding element in percents

relativePercentVertical: number - relative vertical position of slidable element in percents

elementId: string - value of slidable element id attribute

instance: SlideAbleDirective - instance of certain SlideAbleDirective object

You can ser callback functions from parent

Example:

    initHandlers(name: string, event: IEventSlideAble) {
        // Example of using callback function before redraw
        event.instance.checkXBeforeRedraw = function(x, y) {
            return true;
        }
        this.handlers[name] = event.instance;
    }

This functuion called changing horisontal position. If it returns true - element will be moved by horisontal axis, if false - will not

x: number - current horisontal position of mouse pointer

y: number - current vertical position of mouse pointer

boolean

This functuion called changing vertical position. If it returns true - element will be moved by vertical axis, if false - will not

x: number - current horisontal position of mouse pointer

y: number - current vertical position of mouse pointer

boolean