bootstrap-sliderがangular2で動作しない

Question

例1のhttp://seiyria.com/bootstrap-slider/を使用して、ブートストラップパーセンテージスライダを追加しています。 bootstrap-sliderをインストールしました。npmはbootstrap-sliderをインストールします。私のcomponent.htmlは

のようになります

following.: 

<div class="lastpart"> 
      <div class="lasttext"> 
       Annual % rate of increase: 
      </div> 
      <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/> 
      </div> 

と私のindex.html私のindex.htmlに次のスクリプトを追加しました。

<script> 
    var slider = new Slider('#ex1', { 
     formatter: function(value) { 
     return 'Current value: ' + value; 
     } 
    }); 
</script> 

しかし、私には、「Uncaught ReferenceError：Slider is not defined」というエラーが表示されています。どんな助けもありがとう！

更新

私のpackage.jsonは以下の通りです：

{ 
    "name": "demo", 
    "version": "0.0.0", 
    "license": "MIT", 
    "scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/animations": "^4.0.0", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "bootstrap": "^3.3.7", 
    "bootstrap-slider": "^9.8.1", 
    "core-js": "^2.4.1", 
    "ng2-slideable-directive": "^1.0.13", 
    "ng2-slider-component": "^1.0.9", 
    "ng2-styled-directive": "^1.0.5", 
    "ngx-bootstrap": "^1.8.1", 
    "rxjs": "^5.4.1", 
    "zone.js": "^0.8.14" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.2.7", 
    "@angular/compiler-cli": "^4.0.0", 
    "@angular/language-service": "^4.0.0", 
    "@types/jasmine": "~2.5.53", 
    "@types/jasminewd2": "~2.0.2", 
    "@types/node": "~6.0.60", 
    "codelyzer": "~3.0.1", 
    "jasmine-core": "~2.6.2", 
    "jasmine-spec-reporter": "~4.1.0", 
    "karma": "~1.7.0", 
    "karma-chrome-launcher": "~2.1.1", 
    "karma-cli": "~1.0.1", 
    "karma-coverage-istanbul-reporter": "^1.2.1", 
    "karma-jasmine": "~1.1.0", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "protractor": "~5.1.2", 
    "ts-node": "~3.0.4", 
    "tslint": "~5.3.2", 
    "typescript": "~2.3.3" 
    } 
} 

Answer 1

あなたはブートストラップ・スライダへの参照を追加する必要があり、CSSやJSファイルをindex.htmlの中で。ここでは、CDN、参考文献を見つける：あなたはbootstrap.js前にjqueryのを含めるように https://cdnjs.com/libraries/bootstrap-slider

Answer 2

I have been using inside component file and am not getting any error and also it not working for me. 

    I have included 
    "../node_modules/jquery/dist/jquery.min.js", 
      "../node_modules/bootstrap/dist/js/bootstrap.min.js", 
      "../node_modules/element-resize-detector/dist/element-resize-detector.min.js", 
      "../node_modules/cropperjs/dist/cropper.js", 
      "../node_modules/bootstrap-slider/dist/bootstrap-slider.min.js", 
      "../node_modules/bootstrap-slider/dist/bootstrap-slider.js" 

    same way I included css also 

am following example 2 http://seiyria.com/bootstrap-slider/ 

my ts file code 
ngAfterInit() { 
     let ex2 = document.getElementById("ex2"); 
     var slider = new Slider(ex2, { 
      formatter: function (value) { 
       return 'Current value: ' + value; 
      } 
     }); 
     /* let ex2 = document.getElementById("ex2"); 
      var slider = new Slider(ex2, {});*/ 
    } 
and html code 

<input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> <b>€ 1000</b>`enter code here`