JQuery Slider in Angular 2

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <!-- 1. Load libraries -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
    <script src="node_modules/es6-shim/es6-shim.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'src': {defaultExtension: 'ts'}}
      });
    </script>
    <!-- 3. Bootstrap -->
    <script>
      System.import('angular2/platform/browser').then(function(ng){
        System.import('src/app').then(function(src) {
          ng.bootstrap(src.App);
        });
      });
    </script>
  </head>
  <!-- 4. Display the application -->
  <body>
    <app>Loading...</app>
  </body>
</html>

// Code goes here

/* Styles go here */

import { Component } from 'angular2/core';
import { Slider } from './slider.ts';

@Component({
  selector: 'app',
  template:  `<slider></slider>`, 
  directives: [ Slider ]
})

export class App {};

import {Component, ElementRef, Inject, AfterViewInit, ChangeDetectorRef} from 'angular2/core';

declare var jQuery:any;

@Component({
    selector: 'slider',
    template: 
    `
    <input #sldValue [(ngModel)]="slideValue">
    <div id="slider"></div>
    <h2>slideValue = {{slideValue}}</h2>
    `
})

export class Slider implements AfterViewInit {
    
    elementRef: ElementRef;
    slideValue: number = 0;

    constructor(@Inject(ElementRef) elementRef: ElementRef, public cdr: ChangeDetectorRef) {
      this.elementRef = elementRef;
    }

    ngAfterViewInit() { 
      jQuery(this.elementRef.nativeElement).find("#slider").slider({
        range: false,
        orientation: "vertical",
        min: 0,
        max: 100,
        value: this.slideValue,
        slide: ( event, ui ) => {
          this.slideValue = ui.value;
        }
      });
    }
}