├── .npmrc
├── src
    ├── assets
    │   └── .gitkeep
    ├── app
    │   ├── app.component.css
    │   ├── test-slider
    │   │   ├── test-slider.component.css
    │   │   ├── test-slider.component.html
    │   │   ├── test-slider.component.spec.ts
    │   │   └── test-slider.component.ts
    │   ├── app.component.html
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   └── app.component.spec.ts
    ├── styles.css
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    ├── index.html
    ├── tslint.json
    ├── main.ts
    ├── test.ts
    ├── karma.conf.js
    └── polyfills.ts
├── projects
    └── ngx-bootstrap-slider
    │   ├── src
    │       ├── lib
    │       │   ├── slider
    │       │   │   ├── slider.component.css
    │       │   │   ├── slider.component.html
    │       │   │   ├── slider.component.spec.ts
    │       │   │   └── slider.component.ts
    │       │   ├── ngx-bootstrap-slider.service.ts
    │       │   ├── ngx-bootstrap-slider.component.ts
    │       │   ├── ngx-bootstrap-slider.module.ts
    │       │   ├── ngx-bootstrap-slider.service.spec.ts
    │       │   └── ngx-bootstrap-slider.component.spec.ts
    │       ├── public_api.ts
    │       └── test.ts
    │   ├── tsconfig.lib.prod.json
    │   ├── ng-package.prod.json
    │   ├── ng-package.json
    │   ├── tsconfig.spec.json
    │   ├── tslint.json
    │   ├── package.json
    │   ├── tsconfig.lib.json
    │   ├── karma.conf.js
    │   └── README.md
├── misc
    └── documentation-assets
    │   └── examples.png
├── e2e
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    ├── tsconfig.e2e.json
    └── protractor.conf.js
├── .browserslistrc
├── README.md
├── .gitignore
├── tsconfig.json
├── LICENSE.md
├── package.json
├── tslint.json
└── angular.json


/.npmrc:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/test-slider/test-slider.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/test-slider/test-slider.component.html:
--------------------------------------------------------------------------------
1 | <input #slider>


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/src/lib/slider/slider.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | .slider.slider-horizontal {
2 |     width: 100%;
3 | }


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/src/lib/slider/slider.component.html:
--------------------------------------------------------------------------------
1 | <input #slider>


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moritzvieli/ngx-bootstrap-slider/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/misc/documentation-assets/examples.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moritzvieli/ngx-bootstrap-slider/HEAD/misc/documentation-assets/examples.png


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.lib.json",
3 |   "compilerOptions": {
4 |     "declarationMap": false
5 |   },
6 |   "angularCompilerOptions": {
7 |     "compilationMode": "partial"
8 |   }
9 | }


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/src/lib/ngx-bootstrap-slider.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | @Injectable({
 4 |   providedIn: 'root'
 5 | })
 6 | export class NgxBootstrapSliderService {
 7 | 
 8 |   constructor() { }
 9 | }
10 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "main.ts",
 9 |     "polyfills.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/ng-package.prod.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3 |   "dest": "../../dist/ngx-bootstrap-slider",
4 |   "lib": {
5 |     "entryFile": "src/public_api.ts"
6 |   },
7 |   "allowedNonPeerDependencies": ["bootstrap-slider"]
8 | }
9 | 


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/src/public_api.ts:
--------------------------------------------------------------------------------
1 | /*
2 |  * Public API Surface of ngx-bootstrap-slider
3 |  */
4 | 
5 | export * from './lib/ngx-bootstrap-slider.service';
6 | export * from './lib/ngx-bootstrap-slider.component';
7 | export * from './lib/ngx-bootstrap-slider.module';
8 | export * from './lib/slider/slider.component';


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/ng-package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
 3 |   "dest": "../../dist/ngx-bootstrap-slider",
 4 |   "deleteDestPath": false,
 5 |   "lib": {
 6 |     "entryFile": "src/public_api.ts"
 7 |   },
 8 |   "allowedNonPeerDependencies": ["bootstrap-slider"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "test.ts",
12 |     "polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "**/*.spec.ts",
16 |     "**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts"
12 |   ],
13 |   "include": [
14 |     "**/*.spec.ts",
15 |     "**/*.d.ts"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>NgxBootstrapSliderApp</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('workspace-project App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to ngx-bootstrap-slider-app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "app",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "app",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed
5 | > 0.5%
6 | last 2 versions
7 | Firefox ESR
8 | not dead
9 | # IE 9-11


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "mv",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "mv",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/src/lib/ngx-bootstrap-slider.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'mv-ngx-bootstrap-slider',
 5 |   template: `
 6 |     <p>
 7 |       ngx-bootstrap-slider works!
 8 |     </p>
 9 |   `,
10 |   styles: []
11 | })
12 | export class NgxBootstrapSliderComponent implements OnInit {
13 | 
14 |   constructor() { }
15 | 
16 |   ngOnInit() {
17 |   }
18 | 
19 | }
20 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <h2>Slider</h2>
2 | <mv-slider (slideStop)="slideStop()"  [(value)]="value" [min]="min" [max]="100" [enabled]="enabled" [ticks]="[1, 2, 3]" [ticksLabels]='["short", "medium", "long"]'></mv-slider>
3 | 
4 | <!-- <app-test-slider (slideStop)="slideStop()"  [(value)]="value" [min]="min" [max]="100" [enabled]="enabled" [ticks]="[1, 2, 3]" [ticksLabels]='["short", "medium", "long"]'></app-test-slider> -->
5 | 
6 | <h4>Value: {{ value }}</h4>
7 | 
8 | <button (click)="change()">Change</button>


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/src/lib/ngx-bootstrap-slider.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { NgxBootstrapSliderComponent } from './ngx-bootstrap-slider.component';
 3 | import { SliderComponent } from './slider/slider.component';
 4 | 
 5 | @NgModule({
 6 |   imports: [
 7 |   ],
 8 |   declarations: [NgxBootstrapSliderComponent, SliderComponent],
 9 |   exports: [
10 |     NgxBootstrapSliderComponent,
11 |     SliderComponent
12 |   ]
13 | })
14 | export class NgxBootstrapSliderModule { }
15 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.css']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'app';
10 | 
11 |   value: number = 30;
12 |   min: number = 0;
13 |   enabled: boolean = true;
14 | 
15 |   change() {
16 |     this.min = 50;
17 |     //this.enabled = false;
18 |   }
19 | 
20 |   slideStop() {
21 |     console.log('Stopped');
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ngx-bootstrap-slider
 2 | 
 3 | This is an Angular component for the popular and very flexible seiyria/bootstrap-slider(https://github.com/seiyria/bootstrap-slider).
 4 | 
 5 | Some demos are available here: https://seiyria.com/bootstrap-slider/
 6 | 
 7 | Please refer to the readme located in projects/ngx-bootstrap-slider for more information.
 8 | 
 9 | ## Update, build & publish
10 | 
11 | Update and publish a new version with the following commands:
12 | 
13 | ```
14 | cd projects/ngx-bootstrap-slider
15 | npm version minor
16 | cd ../..
17 | npm run publish
18 | ```


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/src/lib/ngx-bootstrap-slider.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, inject } from '@angular/core/testing';
 2 | 
 3 | import { NgxBootstrapSliderService } from './ngx-bootstrap-slider.service';
 4 | 
 5 | describe('NgxBootstrapSliderService', () => {
 6 |   beforeEach(() => {
 7 |     TestBed.configureTestingModule({
 8 |       providers: [NgxBootstrapSliderService]
 9 |     });
10 |   });
11 | 
12 |   it('should be created', inject([NgxBootstrapSliderService], (service: NgxBootstrapSliderService) => {
13 |     expect(service).toBeTruthy();
14 |   }));
15 | });
16 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | // First, initialize the Angular testing environment.
11 | getTestBed().initTestEnvironment(
12 |   BrowserDynamicTestingModule,
13 |   platformBrowserDynamicTesting(), {
14 |     teardown: { destroyAfterEach: false }
15 | }
16 | );
17 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | 
 4 | import { AppComponent } from './app.component';
 5 | import { NgxBootstrapSliderModule } from 'ngx-bootstrap-slider';
 6 | import { TestSliderComponent } from './test-slider/test-slider.component';
 7 | 
 8 | @NgModule({
 9 |   declarations: [
10 |     AppComponent,
11 |     TestSliderComponent
12 |   ],
13 |   imports: [
14 |     BrowserModule,
15 |     NgxBootstrapSliderModule
16 |   ],
17 |   providers: [],
18 |   bootstrap: [AppComponent]
19 | })
20 | export class AppModule { }
21 | 


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'core-js/es7/reflect';
 4 | import 'zone.js';
 5 | import 'zone.js/testing';
 6 | import { getTestBed } from '@angular/core/testing';
 7 | import {
 8 |   BrowserDynamicTestingModule,
 9 |   platformBrowserDynamicTesting
10 | } from '@angular/platform-browser-dynamic/testing';
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting(), {
16 |     teardown: { destroyAfterEach: false }
17 | }
18 | );
19 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * In development mode, to ignore zone related error stack frames such as
11 |  * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12 |  * import the following file, but please comment it out in production mode
13 |  * because it will have performance impact when throw error
14 |  */
15 | // import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | /projects/ngx-bootstrap-slider/dist
 8 | 
 9 | # dependencies
10 | /node_modules
11 | 
12 | # IDEs and editors
13 | /.idea
14 | .project
15 | .classpath
16 | .c9/
17 | *.launch
18 | .settings/
19 | *.sublime-workspace
20 | 
21 | # IDE - VSCode
22 | .vscode/*
23 | !.vscode/settings.json
24 | !.vscode/tasks.json
25 | !.vscode/launch.json
26 | !.vscode/extensions.json
27 | 
28 | # misc
29 | /.angular/cache
30 | /.sass-cache
31 | /connect.lock
32 | /coverage
33 | /libpeerconnection.log
34 | npm-debug.log
35 | yarn-error.log
36 | testem.log
37 | /typings
38 | 
39 | # System Files
40 | .DS_Store
41 | Thumbs.db
42 | 


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-bootstrap-slider",
 3 |   "description": "A flexible bootstrap slider for Angular",
 4 |   "homepage": "https://github.com/moritzvieli/ngx-bootstrap-slider",
 5 |   "bugs": "https://github.com/moritzvieli/ngx-bootstrap-slider/issues",
 6 |   "repository": "moritzvieli/ngx-bootstrap-slider",
 7 |   "version": "2.0.0",
 8 |   "license": "MIT",
 9 |   "keywords": [
10 |     "angular",
11 |     "bootstrap",
12 |     "slider",
13 |     "component"
14 |   ],
15 |   "dependencies": {
16 |     "bootstrap-slider": "^10.2.0",
17 |     "tslib": "^2.0.0"
18 |   },
19 |   "peerDependencies": {
20 |     "@angular/common": "^10.0.0-rc.0 || ^10.0.0",
21 |     "@angular/core": "^10.0.0-rc.0 || ^10.0.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/src/lib/slider/slider.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SliderComponent } from './slider.component';
 4 | 
 5 | describe('SliderComponent', () => {
 6 |   let component: SliderComponent;
 7 |   let fixture: ComponentFixture<SliderComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ SliderComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(SliderComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "downlevelIteration": true,
 6 |     "module": "esnext",
 7 |     "outDir": "./dist/out-tsc",
 8 |     "sourceMap": true,
 9 |     "declaration": false,
10 |     "moduleResolution": "node",
11 |     "experimentalDecorators": true,
12 |     "target": "ES2022",
13 |     "typeRoots": [
14 |       "node_modules/@types"
15 |     ],
16 |     "lib": [
17 |       "es2017",
18 |       "dom"
19 |     ],
20 |     "paths": {
21 |       "ngx-bootstrap-slider": [
22 |         "projects/ngx-bootstrap-slider/src/public_api"
23 |       ],
24 |       "ngx-bootstrap-slider/*": [
25 |         "projects/ngx-bootstrap-slider/src/public_api"
26 |       ]
27 |     },
28 |     "useDefineForClassFields": false
29 |   }
30 | }


--------------------------------------------------------------------------------
/src/app/test-slider/test-slider.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { TestSliderComponent } from './test-slider.component';
 4 | 
 5 | describe('TestSliderComponent', () => {
 6 |   let component: TestSliderComponent;
 7 |   let fixture: ComponentFixture<TestSliderComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ TestSliderComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(TestSliderComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/tsconfig.lib.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/lib",
 5 |     "declarationMap": true,
 6 |     "module": "es2015",
 7 |     "moduleResolution": "node",
 8 |     "declaration": true,
 9 |     "sourceMap": true,
10 |     "inlineSources": true,
11 |     "experimentalDecorators": true,
12 |     "importHelpers": true,
13 |     "types": [],
14 |     "lib": [
15 |       "dom",
16 |       "es2015"
17 |     ]
18 |   },
19 |   "angularCompilerOptions": {
20 |     "skipTemplateCodegen": true,
21 |     "strictMetadataEmit": true,
22 |     "fullTemplateTypeCheck": true,
23 |     "strictInjectionParameters": true,
24 |     "flatModuleId": "AUTOGENERATED",
25 |     "flatModuleOutFile": "AUTOGENERATED"
26 |   },
27 |   "exclude": [
28 |     "src/test.ts",
29 |     "**/*.spec.ts"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './src/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: require('path').join(__dirname, './tsconfig.e2e.json')
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/src/lib/ngx-bootstrap-slider.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { NgxBootstrapSliderComponent } from './ngx-bootstrap-slider.component';
 4 | 
 5 | describe('NgxBootstrapSliderComponent', () => {
 6 |   let component: NgxBootstrapSliderComponent;
 7 |   let fixture: ComponentFixture<NgxBootstrapSliderComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ NgxBootstrapSliderComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(NgxBootstrapSliderComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../../coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };
32 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { AppComponent } from './app.component';
 3 | describe('AppComponent', () => {
 4 |   beforeEach(async(() => {
 5 |     TestBed.configureTestingModule({
 6 |       declarations: [
 7 |         AppComponent
 8 |       ],
 9 |     }).compileComponents();
10 |   }));
11 |   it('should create the app', async(() => {
12 |     const fixture = TestBed.createComponent(AppComponent);
13 |     const app = fixture.debugElement.componentInstance;
14 |     expect(app).toBeTruthy();
15 |   }));
16 |   it(`should have as title 'app'`, async(() => {
17 |     const fixture = TestBed.createComponent(AppComponent);
18 |     const app = fixture.debugElement.componentInstance;
19 |     expect(app.title).toEqual('app');
20 |   }));
21 |   it('should render title in a h1 tag', async(() => {
22 |     const fixture = TestBed.createComponent(AppComponent);
23 |     fixture.detectChanges();
24 |     const compiled = fixture.debugElement.nativeElement;
25 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to ngx-bootstrap-slider-app!');
26 |   }));
27 | });
28 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 moritzvieli and contributors
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-bootstrap-slider-app",
 3 |   "version": "0.3.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e",
11 |     "build_lib": "ng build --configuration production ngx-bootstrap-slider",
12 |     "npm_pack": "cd dist/ngx-bootstrap-slider && npm pack",
13 |     "package": "npm run build_lib && npm run npm_pack",
14 |     "publish": "npm run package && cd dist/ngx-bootstrap-slider && npm publish"
15 |   },
16 |   "private": true,
17 |   "dependencies": {
18 |     "@angular/animations": "^17.3.11",
19 |     "@angular/common": "^17.3.11",
20 |     "@angular/compiler": "^17.3.11",
21 |     "@angular/core": "^17.3.11",
22 |     "@angular/forms": "^17.3.11",
23 |     "@angular/platform-browser": "^17.3.11",
24 |     "@angular/platform-browser-dynamic": "^17.3.11",
25 |     "@angular/router": "^17.3.11",
26 |     "bootstrap-slider": "^11.0.2",
27 |     "core-js": "^2.5.4",
28 |     "rxjs": "^6.5.5",
29 |     "tslib": "^2.0.0",
30 |     "zone.js": "~0.14.7"
31 |   },
32 |   "devDependencies": {
33 |     "@angular-devkit/build-angular": "^17.3.8",
34 |     "@angular/cli": "^17.3.8",
35 |     "@angular/compiler-cli": "^17.3.11",
36 |     "@angular/language-service": "^17.3.11",
37 |     "@types/jasmine": "~3.6.0",
38 |     "@types/jasminewd2": "~2.0.3",
39 |     "@types/node": "^12.11.1",
40 |     "codelyzer": "^6.0.0",
41 |     "jasmine-core": "~3.8.0",
42 |     "jasmine-spec-reporter": "~5.0.0",
43 |     "karma": "~6.4.3",
44 |     "karma-chrome-launcher": "~3.1.0",
45 |     "karma-coverage-istanbul-reporter": "~3.0.2",
46 |     "karma-jasmine": "~4.0.0",
47 |     "karma-jasmine-html-reporter": "^1.7.0",
48 |     "ng-packagr": "^17.3.0",
49 |     "protractor": "~7.0.0",
50 |     "ts-node": "~5.0.1",
51 |     "tslint": "~6.1.0",
52 |     "typescript": "~5.4.5"
53 |   }
54 | }


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <img src="https://raw.githubusercontent.com/moritzvieli/ngx-bootstrap-slider/master/misc/documentation-assets/examples.png" width="300" alt="Angular Bootstrap Slider">
 3 |   <br>
 4 |   <h1>ngx-bootstrap-slider</h1>
 5 | </div>
 6 | 
 7 | This is an Angular component for the popular and very flexible seiyria/bootstrap-slider (https://github.com/seiyria/bootstrap-slider).
 8 | 
 9 | Some demos are available here: https://seiyria.com/bootstrap-slider/
10 | 
11 | ## Install
12 | 
13 | ```
14 | npm install ngx-bootstrap-slider
15 | ```
16 | 
17 | | Angular Version | ngx-bootstrap-slider Version |
18 | | --------------- | ---------------------------- |
19 | | Until v12       | 1.9.0                        |
20 | | From v13        | 2.0.0                        |
21 | 
22 | ## Setup
23 | 
24 | ### Include the module
25 | 
26 | Import the module in your app.module.ts:
27 | 
28 | ```
29 | import { NgxBootstrapSliderModule } from 'ngx-bootstrap-slider';
30 | ```
31 | 
32 | Add the module to the imports in your app.module.ts:
33 | 
34 | ```
35 | imports: [
36 |   ...
37 |   NgxBootstrapSliderModule,
38 |   ...
39 | ]
40 | ```
41 | 
42 | ### Configure the Angular CLI
43 | 
44 | Add the CSS and JavaScript files to your angular.json:
45 | 
46 | ```
47 | "styles": [
48 |   "node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css"
49 | ],
50 | "scripts": [
51 |   "node_modules/bootstrap-slider/dist/bootstrap-slider.min.js"
52 | ]
53 | ```
54 | 
55 | ## Getting started
56 | 
57 | Add a slider element to your component:
58 | 
59 | ```
60 | <mv-slider [(value)]="value" [min]="1" [max]="100" [enabled]="enabled" (change)="change()"></mv-slider>
61 | ```
62 | 
63 | ## Attributes
64 | 
65 | All available properties are described here: https://github.com/seiyria/bootstrap-slider#options
66 | 
67 | The names have been unified to camel-casing (e.g. `[ticksLabels]` not `[ticks_labels]`).
68 | 
69 | ## Events
70 | 
71 | All available events are described here: https://github.com/seiyria/bootstrap-slider#events
72 | 
73 | Currently, only the following events are implemented:
74 | - slide
75 | - slideStart
76 | - slideStop
77 | - change


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /**
22 |  * By default, zone.js will patch all possible macroTask and DomEvents
23 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
24 |  * because those flags need to be set before `zone.js` being loaded, and webpack
25 |  * will put import in the top of bundle, so user need to create a separate file
26 |  * in this directory (for example: zone-flags.ts), and put the following flags
27 |  * into that file, and then add the following code before importing zone.js.
28 |  * import './zone-flags.ts';
29 |  *
30 |  * The flags allowed in zone-flags.ts are listed here.
31 |  *
32 |  * The following flags will work for all browsers.
33 |  *
34 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 |  *
38 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
40 |  *
41 |  *  (window as any).__Zone_enable_cross_context_check = true;
42 |  *
43 |  */
44 | 
45 | /***************************************************************************************************
46 |  * Zone JS is required by default for Angular itself.
47 |  */
48 | import 'zone.js';  // Included with Angular CLI.
49 | 
50 | 
51 | /***************************************************************************************************
52 |  * APPLICATION IMPORTS
53 |  */
54 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx"
 22 |     ],
 23 |     "import-spacing": true,
 24 |     "indent": [
 25 |       true,
 26 |       "spaces"
 27 |     ],
 28 |     "interface-over-type-literal": true,
 29 |     "label-position": true,
 30 |     "max-line-length": [
 31 |       true,
 32 |       140
 33 |     ],
 34 |     "member-access": false,
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-arg": true,
 47 |     "no-bitwise": true,
 48 |     "no-console": [
 49 |       true,
 50 |       "debug",
 51 |       "info",
 52 |       "time",
 53 |       "timeEnd",
 54 |       "trace"
 55 |     ],
 56 |     "no-construct": true,
 57 |     "no-debugger": true,
 58 |     "no-duplicate-super": true,
 59 |     "no-empty": false,
 60 |     "no-empty-interface": true,
 61 |     "no-eval": true,
 62 |     "no-inferrable-types": [
 63 |       true,
 64 |       "ignore-params"
 65 |     ],
 66 |     "no-misused-new": true,
 67 |     "no-non-null-assertion": true,
 68 |     "no-shadowed-variable": true,
 69 |     "no-string-literal": false,
 70 |     "no-string-throw": true,
 71 |     "no-switch-case-fall-through": true,
 72 |     "no-trailing-whitespace": true,
 73 |     "no-unnecessary-initializer": true,
 74 |     "no-unused-expression": true,
 75 |     "no-var-keyword": true,
 76 |     "object-literal-sort-keys": false,
 77 |     "one-line": [
 78 |       true,
 79 |       "check-open-brace",
 80 |       "check-catch",
 81 |       "check-else",
 82 |       "check-whitespace"
 83 |     ],
 84 |     "prefer-const": true,
 85 |     "quotemark": [
 86 |       true,
 87 |       "single"
 88 |     ],
 89 |     "radix": true,
 90 |     "semicolon": [
 91 |       true,
 92 |       "always"
 93 |     ],
 94 |     "triple-equals": [
 95 |       true,
 96 |       "allow-null-check"
 97 |     ],
 98 |     "typedef-whitespace": [
 99 |       true,
100 |       {
101 |         "call-signature": "nospace",
102 |         "index-signature": "nospace",
103 |         "parameter": "nospace",
104 |         "property-declaration": "nospace",
105 |         "variable-declaration": "nospace"
106 |       }
107 |     ],
108 |     "unified-signatures": true,
109 |     "variable-name": false,
110 |     "whitespace": [
111 |       true,
112 |       "check-branch",
113 |       "check-decl",
114 |       "check-operator",
115 |       "check-separator",
116 |       "check-type"
117 |     ],
118 |     "no-output-on-prefix": true,
119 |     "no-inputs-metadata-property": true,
120 |     "no-outputs-metadata-property": true,
121 |     "no-host-metadata-property": true,
122 |     "no-input-rename": true,
123 |     "no-output-rename": true,
124 |     "use-lifecycle-interface": true,
125 |     "use-pipe-transform-interface": true,
126 |     "component-class-suffix": true,
127 |     "directive-class-suffix": true
128 |   }
129 | }
130 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "ngx-bootstrap-slider-app": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {},
 12 |       "architect": {
 13 |         "build": {
 14 |           "builder": "@angular-devkit/build-angular:browser",
 15 |           "options": {
 16 |             "outputPath": "dist/ngx-bootstrap-slider-app",
 17 |             "index": "src/index.html",
 18 |             "main": "src/main.ts",
 19 |             "polyfills": "src/polyfills.ts",
 20 |             "tsConfig": "src/tsconfig.app.json",
 21 |             "assets": [
 22 |               "src/favicon.ico",
 23 |               "src/assets"
 24 |             ],
 25 |             "styles": [
 26 |               "node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css",
 27 |               "src/styles.css"
 28 |             ],
 29 |             "scripts": [
 30 |               "node_modules/bootstrap-slider/dist/bootstrap-slider.min.js"
 31 |             ],
 32 |             "vendorChunk": true,
 33 |             "extractLicenses": false,
 34 |             "buildOptimizer": false,
 35 |             "sourceMap": true,
 36 |             "optimization": false,
 37 |             "namedChunks": true
 38 |           },
 39 |           "configurations": {
 40 |             "production": {
 41 |               "budgets": [
 42 |                 {
 43 |                   "type": "anyComponentStyle",
 44 |                   "maximumWarning": "6kb"
 45 |                 }
 46 |               ],
 47 |               "fileReplacements": [
 48 |                 {
 49 |                   "replace": "src/environments/environment.ts",
 50 |                   "with": "src/environments/environment.prod.ts"
 51 |                 }
 52 |               ],
 53 |               "optimization": true,
 54 |               "outputHashing": "all",
 55 |               "sourceMap": false,
 56 |               "namedChunks": false,
 57 |               "extractLicenses": true,
 58 |               "vendorChunk": false,
 59 |               "buildOptimizer": true
 60 |             }
 61 |           },
 62 |           "defaultConfiguration": ""
 63 |         },
 64 |         "serve": {
 65 |           "builder": "@angular-devkit/build-angular:dev-server",
 66 |           "options": {
 67 |             "buildTarget": "ngx-bootstrap-slider-app:build"
 68 |           },
 69 |           "configurations": {
 70 |             "production": {
 71 |               "buildTarget": "ngx-bootstrap-slider-app:build:production"
 72 |             }
 73 |           }
 74 |         },
 75 |         "extract-i18n": {
 76 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 77 |           "options": {
 78 |             "buildTarget": "ngx-bootstrap-slider-app:build"
 79 |           }
 80 |         },
 81 |         "test": {
 82 |           "builder": "@angular-devkit/build-angular:karma",
 83 |           "options": {
 84 |             "main": "src/test.ts",
 85 |             "polyfills": "src/polyfills.ts",
 86 |             "tsConfig": "src/tsconfig.spec.json",
 87 |             "karmaConfig": "src/karma.conf.js",
 88 |             "styles": [
 89 |               "src/styles.css"
 90 |             ],
 91 |             "scripts": [],
 92 |             "assets": [
 93 |               "src/favicon.ico",
 94 |               "src/assets"
 95 |             ]
 96 |           }
 97 |         }
 98 |       }
 99 |     },
100 |     "ngx-bootstrap-slider-app-e2e": {
101 |       "root": "e2e/",
102 |       "projectType": "application",
103 |       "architect": {
104 |         "e2e": {
105 |           "builder": "@angular-devkit/build-angular:protractor",
106 |           "options": {
107 |             "protractorConfig": "e2e/protractor.conf.js",
108 |             "devServerTarget": "ngx-bootstrap-slider-app:serve"
109 |           },
110 |           "configurations": {
111 |             "production": {
112 |               "devServerTarget": "ngx-bootstrap-slider-app:serve:production"
113 |             }
114 |           }
115 |         }
116 |       }
117 |     },
118 |     "ngx-bootstrap-slider": {
119 |       "root": "projects/ngx-bootstrap-slider",
120 |       "sourceRoot": "projects/ngx-bootstrap-slider/src",
121 |       "projectType": "library",
122 |       "prefix": "mv",
123 |       "architect": {
124 |         "build": {
125 |           "builder": "@angular-devkit/build-angular:ng-packagr",
126 |           "options": {
127 |             "tsConfig": "projects/ngx-bootstrap-slider/tsconfig.lib.json",
128 |             "project": "projects/ngx-bootstrap-slider/ng-package.json"
129 |           },
130 |           "configurations": {
131 |             "production": {
132 |               "project": "projects/ngx-bootstrap-slider/ng-package.prod.json"
133 |             ,              "tsConfig": "projects/ngx-bootstrap-slider/tsconfig.lib.prod.json"
134 | }
135 |           }
136 |         },
137 |         "test": {
138 |           "builder": "@angular-devkit/build-angular:karma",
139 |           "options": {
140 |             "main": "projects/ngx-bootstrap-slider/src/test.ts",
141 |             "tsConfig": "projects/ngx-bootstrap-slider/tsconfig.spec.json",
142 |             "karmaConfig": "projects/ngx-bootstrap-slider/karma.conf.js"
143 |           }
144 |         }
145 |       }
146 |     }
147 |   }
148 | }


--------------------------------------------------------------------------------
/src/app/test-slider/test-slider.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
  2 | 
  3 | declare var Slider: any;
  4 | 
  5 | @Component({
  6 |   selector: 'app-test-slider',
  7 |   templateUrl: './test-slider.component.html',
  8 |   styleUrls: ['./test-slider.component.css']
  9 | })
 10 | export class TestSliderComponent implements OnInit {
 11 |   // The slider HTML element
 12 |   @ViewChild('slider', { static: true }) sliderElement;
 13 | 
 14 |   // The slider object
 15 |   slider: any;
 16 | 
 17 |   initialOptions: any = {};
 18 |   initialStyle: any;
 19 | 
 20 |   // This property is not applied to the underlying slider element
 21 |   @Input()
 22 |   set style(value: any) {
 23 |     if (this.slider) {
 24 |       this.slider.getElement().style = value;
 25 |     } else {
 26 |       this.initialStyle = value;
 27 |     }
 28 |   }
 29 | 
 30 |   // Handle the value (two-way)
 31 |   @Input()
 32 |   set value(value: number | any[]) {
 33 |     if (this.slider) {
 34 |       this.slider.setValue(value);
 35 |     } else {
 36 |       this.initialOptions.value = value;
 37 |     }
 38 |   }
 39 |   @Output() valueChange = new EventEmitter();
 40 | 
 41 |   // The following properties are applied to the underlying slider element
 42 |   @Input()
 43 |   set min(value: number) {
 44 |     this.changeAttribute('min', value);
 45 |   }
 46 | 
 47 |   @Input()
 48 |   set max(value: number) {
 49 |     this.changeAttribute('max', value);
 50 |   }
 51 | 
 52 |   @Input()
 53 |   set step(value: number) {
 54 |     this.changeAttribute('step', value);
 55 |   }
 56 | 
 57 |   @Input()
 58 |   set precision(value: number) {
 59 |     this.changeAttribute('precision', value);
 60 |   }
 61 | 
 62 |   @Input()
 63 |   set orientation(value: string) {
 64 |     this.changeAttribute('orientation', value);
 65 |   }
 66 | 
 67 |   @Input()
 68 |   set range(value: boolean) {
 69 |     this.changeAttribute('range', value);
 70 |   }
 71 | 
 72 |   @Input()
 73 |   set selection(value: string) {
 74 |     this.changeAttribute('selection', value);
 75 |   }
 76 | 
 77 |   @Input()
 78 |   set tooltip(value: string) {
 79 |     this.changeAttribute('tooltip', value);
 80 |   }
 81 | 
 82 |   @Input()
 83 |   set tooltipSplit(value: boolean) {
 84 |     this.changeAttribute('tooltip_split', value);
 85 |   }
 86 | 
 87 |   @Input()
 88 |   set tooltipPosition(value: string) {
 89 |     this.changeAttribute('tooltip_position', value);
 90 |   }
 91 | 
 92 |   @Input()
 93 |   set handle(value: string) {
 94 |     this.changeAttribute('handle', value);
 95 |   }
 96 | 
 97 |   @Input()
 98 |   set reversed(value: boolean) {
 99 |     this.changeAttribute('reversed', value);
100 |   }
101 | 
102 |   @Input()
103 |   set rtl(value: boolean) {
104 |     this.changeAttribute('rtl', value);
105 |   }
106 | 
107 |   @Input()
108 |   set enabled(value: boolean) {
109 |     this.changeAttribute('enabled', value);
110 |   }
111 | 
112 |   @Input()
113 |   set naturalArrowKeys(value: boolean) {
114 |     this.changeAttribute('natural_arrow_keys', value);
115 |   }
116 | 
117 |   @Input()
118 |   set ticks(value: any[]) {
119 |     this.changeAttribute('ticks', value);
120 |   }
121 | 
122 |   @Input()
123 |   set ticksPositions(value: number[]) {
124 |     this.changeAttribute('ticks_positions', value);
125 |   }
126 | 
127 |   @Input()
128 |   set ticksLabels(value: string[]) {
129 |     this.changeAttribute('ticks_labels', value);
130 |   }
131 | 
132 |   @Input()
133 |   set ticksSnapBounds(value: number) {
134 |     this.changeAttribute('ticks_snap_bounds', value);
135 |   }
136 |   
137 |   @Input()
138 |   set ticksTooltip(value: boolean) {
139 |     this.changeAttribute('ticks_tooltip', value);
140 |   }
141 | 
142 |   @Input()
143 |   set scale(value: string) {
144 |     this.changeAttribute('scale', value);
145 |   }
146 | 
147 |   @Input()
148 |   set labelledBy(value: string[]) {
149 |     this.changeAttribute('labelledby', value);
150 |   }
151 | 
152 |   @Input()
153 |   set rangeHighlights(value: any[]) {
154 |     this.changeAttribute('rangeHighlights', value);
155 |   }
156 | 
157 |   // The following events are emitted
158 |   @Output() slide = new EventEmitter();
159 | 
160 |   @Output() slideStart = new EventEmitter();
161 | 
162 |   @Output() slideStop = new EventEmitter();
163 | 
164 |   @Output() change = new EventEmitter();
165 | 
166 |   constructor() { }
167 | 
168 |   private addChangeListeners() {
169 |     this.slider.on('slide', (value: any) => {
170 |       this.slide.emit(value);
171 |     });
172 | 
173 |     this.slider.on('slideStart', (value: any) => {
174 |       this.slideStart.emit(value);
175 |     });
176 | 
177 |     this.slider.on('slideStop', (value: any) => {
178 |       this.slideStop.emit(value);
179 |     });
180 | 
181 |     this.slider.on('change', (event: any) => {
182 |       this.change.emit(event);
183 |       this.valueChange.emit(event.newValue);
184 |     });
185 |   }
186 | 
187 |   private prepareSlider() {
188 |     // We need to add the change listeners again after each refresh
189 |     this.addChangeListeners();
190 | 
191 |     // Add the styling to the element
192 |     this.slider.getElement().style = this.initialStyle;
193 |   }
194 | 
195 |   private changeAttribute(name: string, value: any) {
196 |     if (this.slider) {
197 |       this.slider.setAttribute(name, value);
198 |       this.slider.refresh();
199 |       this.prepareSlider();
200 |     } else {
201 |       this.initialOptions[name] = value;
202 |     }
203 |   }
204 | 
205 |   ngOnInit() {
206 |     this.slider = new Slider(this.sliderElement.nativeElement, this.initialOptions);
207 |     this.prepareSlider();
208 |   }
209 | 
210 | }
211 | 


--------------------------------------------------------------------------------
/projects/ngx-bootstrap-slider/src/lib/slider/slider.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
  2 | 
  3 | declare var Slider: any;
  4 | 
  5 | @Component({
  6 |   selector: 'mv-slider',
  7 |   templateUrl: './slider.component.html',
  8 |   styleUrls: ['./slider.component.css']
  9 | })
 10 | export class SliderComponent implements OnInit {
 11 |   // The slider HTML element
 12 |   @ViewChild('slider', { static: true }) sliderElement: any;
 13 | 
 14 |   // The slider object
 15 |   slider: any;
 16 | 
 17 |   initialOptions: any = {};
 18 |   initialStyle: any;
 19 | 
 20 |   // This property is not applied to the underlying slider element
 21 |   @Input()
 22 |   set style(value: any) {
 23 |     if (this.slider) {
 24 |       this.slider.getElement().setAttribute('style', value);
 25 |     } else {
 26 |       this.initialStyle = value;
 27 |     }
 28 |   }
 29 | 
 30 |   // Handle the value (two-way)
 31 |   @Input()
 32 |   set value(value: number | any[]) {
 33 |     if (this.slider) {
 34 |       this.slider.setValue(value);
 35 |     } else {
 36 |       this.initialOptions.value = value;
 37 |     }
 38 |   }
 39 |   @Output() valueChange = new EventEmitter();
 40 | 
 41 |   // The following properties are applied to the underlying slider element
 42 |   @Input()
 43 |   set min(value: number) {
 44 |     this.changeAttribute('min', value);
 45 |   }
 46 | 
 47 |   @Input()
 48 |   set max(value: number) {
 49 |     this.changeAttribute('max', value);
 50 |   }
 51 | 
 52 |   @Input()
 53 |   set step(value: number) {
 54 |     this.changeAttribute('step', value);
 55 |   }
 56 | 
 57 |   @Input()
 58 |   set precision(value: number) {
 59 |     this.changeAttribute('precision', value);
 60 |   }
 61 | 
 62 |   @Input()
 63 |   set orientation(value: string) {
 64 |     this.changeAttribute('orientation', value);
 65 |   }
 66 | 
 67 |   @Input()
 68 |   set range(value: boolean) {
 69 |     this.changeAttribute('range', value);
 70 |   }
 71 | 
 72 |   @Input()
 73 |   set selection(value: string) {
 74 |     this.changeAttribute('selection', value);
 75 |   }
 76 | 
 77 |   @Input()
 78 |   set tooltip(value: string) {
 79 |     this.changeAttribute('tooltip', value);
 80 |   }
 81 | 
 82 |   @Input()
 83 |   set tooltipSplit(value: boolean) {
 84 |     this.changeAttribute('tooltip_split', value);
 85 |   }
 86 | 
 87 |   @Input()
 88 |   set tooltipPosition(value: string) {
 89 |     this.changeAttribute('tooltip_position', value);
 90 |   }
 91 | 
 92 |   @Input()
 93 |   set handle(value: string) {
 94 |     this.changeAttribute('handle', value);
 95 |   }
 96 | 
 97 |   @Input()
 98 |   set reversed(value: boolean) {
 99 |     this.changeAttribute('reversed', value);
100 |   }
101 | 
102 |   @Input()
103 |   set rtl(value: boolean) {
104 |     this.changeAttribute('rtl', value);
105 |   }
106 | 
107 |   @Input()
108 |   set enabled(value: boolean) {
109 |     this.changeAttribute('enabled', value);
110 |   }
111 | 
112 |   @Input()
113 |   set naturalArrowKeys(value: boolean) {
114 |     this.changeAttribute('natural_arrow_keys', value);
115 |   }
116 | 
117 |   @Input()
118 |   set ticks(value: any[]) {
119 |     this.changeAttribute('ticks', value);
120 |   }
121 | 
122 |   @Input()
123 |   set ticksPositions(value: number[]) {
124 |     this.changeAttribute('ticks_positions', value);
125 |   }
126 | 
127 |   @Input()
128 |   set ticksLabels(value: string[]) {
129 |     this.changeAttribute('ticks_labels', value);
130 |   }
131 | 
132 |   @Input()
133 |   set ticksSnapBounds(value: number) {
134 |     this.changeAttribute('ticks_snap_bounds', value);
135 |   }
136 | 
137 |   @Input()
138 |   set ticksTooltip(value: boolean) {
139 |     this.changeAttribute('ticks_tooltip', value);
140 |   }
141 | 
142 |   @Input()
143 |   set scale(value: string) {
144 |     this.changeAttribute('scale', value);
145 |   }
146 | 
147 |   @Input()
148 |   set labelledBy(value: string[]) {
149 |     this.changeAttribute('labelledby', value);
150 |   }
151 | 
152 |   @Input()
153 |   set rangeHighlights(value: any[]) {
154 |     this.changeAttribute('rangeHighlights', value);
155 |   }
156 | 
157 |   @Input()
158 |   set formatter(value: Function) {
159 |     this.changeAttribute('formatter', value);
160 |   }
161 | 
162 |   @Input()
163 |   set lockToTicks(value: Function) {
164 |     this.changeAttribute('lock_to_ticks', value);
165 |   }
166 | 
167 |   // The following events are emitted
168 |   @Output() slide = new EventEmitter();
169 | 
170 |   @Output() slideStart = new EventEmitter();
171 | 
172 |   @Output() slideStop = new EventEmitter();
173 | 
174 |   @Output() change = new EventEmitter();
175 | 
176 |   constructor() { }
177 | 
178 |   private addChangeListeners() {
179 |     this.slider.on('slide', (value: any) => {
180 |       this.slide.emit(value);
181 |     });
182 | 
183 |     this.slider.on('slideStart', (value: any) => {
184 |       this.slideStart.emit(value);
185 |     });
186 | 
187 |     this.slider.on('slideStop', (value: any) => {
188 |       this.slideStop.emit(value);
189 |     });
190 | 
191 |     this.slider.on('change', (event: any) => {
192 |       this.change.emit(event);
193 |       this.valueChange.emit(event.newValue);
194 |     });
195 |   }
196 | 
197 |   private prepareSlider() {
198 |     // We need to add the change listeners again after each refresh
199 |     this.addChangeListeners();
200 | 
201 |     // Add the styling to the element
202 |     this.slider.getElement().setAttribute('style', this.initialStyle);
203 |   }
204 | 
205 |   private changeAttribute(name: string, value: any) {
206 |     if (this.slider) {
207 |       this.slider.setAttribute(name, value);
208 |       this.slider.refresh();
209 |       this.prepareSlider();
210 |     } else {
211 |       this.initialOptions[name] = value;
212 |     }
213 |   }
214 | 
215 |   ngOnInit() {
216 |     // Don't set the value over the initial options, because it will alway
217 |     // be reset. This option seems to be a little buggy.
218 |     let value = undefined;
219 | 
220 |     if (this.initialOptions.value) {
221 |       value = this.initialOptions.value;
222 |       delete this.initialOptions['value'];
223 |     }
224 | 
225 |     this.slider = new Slider(this.sliderElement.nativeElement, this.initialOptions);
226 | 
227 |     if (value) {
228 |       this.slider.setValue(value);
229 |     }
230 | 
231 |     this.prepareSlider();
232 |   }
233 | 
234 | }
235 | 


--------------------------------------------------------------------------------