ng2-slider.component.html

<div class="slider-input-block">
    <input type="number"
           id="{{id + '-start-value'}}"
           npm publish
           name="{{id + '-start-value'}}"
           [step]="stepValue"
           [min]="min"
           [max]="max"
           [(ngModel)]="startValue"
           (change)="valueChanged($event, 0)"
           #startInput
           />
</div>
<div *ngIf="isRange" class="slider-input-block">
    <input type="number"
           id="{{id + '-end-value'}}"
           class="slider-input-box"
           name="{{id + '-end-value'}}"
           [step]="stepValue"
           [min]="min"
           [max]="max"
           [(ngModel)]="endValue"
           (change)="valueChanged($event, 1)"
           #endInput
           />
</div>

<div style="clear:both; position:relative;"
     class="slider-container ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"
     styled
     [styleBlock] = "['{height: 26px; margin-top: 7px; margin-bottom: 12px}', '.slider-handle {box-sizing: content-box;}']">
    <div #ribbon
         id="{{id + '-ribbon'}}"
         class="range-ribbon ui-slider-range ui-widget-header ui-corner-all">
    </div>
    <span #start
          slideAble
          slideDirection="horisontal"
          boundElement="{{id + '-ribbon'}}"
          dynamicRightLimit="{{(isRange == true) ? id + '-right-handle' : null}}"
          (onStopSliding)="onStopSliding($event)"
          (onSliding)="onSliding($event)"
          (onInit)="initHandlers('Start', $event)"
          [id]="id + '-left-handle'"
          [parent]="instance"
          [step]="stepX"
          class="slider-handle ui-slider-handle ui-state-default ui-corner-all"
          tabindex="0"
          style="left: 0%;"></span>
    <span *ngIf="isRange"
          #end
          slideAble
          slideDirection="horisontal"
          boundElement="{{id + '-ribbon'}}"
          [dynamicLeftLimit]="id + '-left-handle'"
          (onStopSliding)="onStopSliding($event)"
          (onSliding)="onSliding($event)"
          (onInit)="initHandlers('End', $event)"
          [id]="id + '-right-handle'"
          [step]="stepX"
          class="slider-handle ui-slider-handle ui-state-default ui-corner-all"
          tabindex="0"
          style="left: 100%;"></span>
</div>