First working version

.gitignore

@@ -1,37 +1,12 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
+npm-debug.log
 node_modules
 jspm_packages
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
+.idea
+lib
+build
+dist
+example/src/**/*.js
+src/*.js
+src/*ngfactory.ts
+src/*.json
+*.tgz

.npmignore

@@ -0,0 +1,4 @@
+example
+node_modules
+src
+*.tgz

README.md

@@ -1,2 +1,86 @@
-# ng2-ion-range-slider
-Ion Range Slider for AngularJS 2 https://github.com/IonDen/ion.rangeSlider
+## ng2-ion-range-slider
+[Ion Range Slider](https://github.com/IonDen/ion.rangeSlider) now optimized for easy use as an importable Angular 2 Module and installable using npm.
+
+### Demos and Sample Usage
+
+For Demos and sample usage of this package have a look at the example folder
+
+```
+git clone git@github.com:PhilippStein/ng2-ion-range-slider.git
+cd ng2-ion-range-slider/example
+npm install
+npm start
+```
+
+### Installation
+```
+npm install ng2-ion-range-slider --save
+```
+
+#### Setup scripts and styles
+If you use angular-cli, add ``jquery`` and ``ion-range-slider`` to the scripts section of ``.angular-cli.jso``
+```
+{
+ ...
+ "apps": [
+ {
+ ...
+ "scripts": [
+ "../node_modules/jquery/dist/jquery.min.js", 
+ "../node_modules/ion-rangeslider/js/ion.rangeSlider.min.js"
+ ],
+ ... 
+```
+
+Also add the ion-range-slider style and skin css to the styles section in your ``.angular-cli.jso``
+```
+{
+ ...
+ "apps": [
+ {
+ ...
+ "styles": [
+ "../node_modules/ion-rangeslider/css/ion.rangeSlider.css",
+ "../node_modules/ion-rangeslider/css/ion.rangeSlider.skinFlat.css"
+ ],
+ ... 
+```
+
+
+
+#### Import IonRangeSliderModule
+import the `IonRangeSliderModule` in your application module
+
+``` javascript
+import { IonRangeSliderModule } from "ng2-ion-range-slider";
+
+@NgModule({
+ imports: [IonRangeSliderModule]
+})
+
+```
+#### Use the ion-range-slider
+Use the `ion-range-slider` directive in your component.
+
+``` html
+<ion-range-slider #sliderElement
+ type="double"
+ [min]="myMinVar"
+ max="100"
+ from="28"
+ from_min="10"
+ from_max="30"
+ from_shadow="true"
+ to="40"
+ to_min="40"
+ to_max="90"
+ to_shadow="true"
+ grid="true"
+ grid_num="10"
+ prefix="Weight: "
+ postfix=" million pounds"
+ decorate_both="false"
+ (onUpdate)="myOnUpdate($event)"
+ (onChange)="myOnChange($event)"
+ (onFinish)="myOnFinish($event)"></ion-range-slider>
+```

example/.angular-cli.json

@@ -0,0 +1,33 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "project": {
+ "name": "ng2-ion-range-slider-example"
+ },
+ "apps": [
+ {
+ "root": "src",
+ "outDir": "dist",
+ "assets": [
+ ],
+ "index": "index.html",
+ "main": "main.ts",
+ "polyfills": "polyfills.ts",
+ "tsconfig": "tsconfig.app.json",
+ "prefix": "app",
+ "styles": [
+ "../node_modules/ion-rangeslider/css/ion.rangeSlider.css",
+ "../node_modules/ion-rangeslider/css/ion.rangeSlider.skinFlat.css"
+ ],
+ "scripts": ["../node_modules/jquery/dist/jquery.min.js", "../node_modules/ion-rangeslider/js/ion.rangeSlider.min.js"],
+ "environmentSource": "environments/environment.ts",
+ "environments": {
+ "dev": "environments/environment.ts",
+ "prod": "environments/environment.prod.ts"
+ }
+ }
+ ],
+ "defaults": {
+ "styleExt": "css",
+ "component": {}
+ }
+}

example/package.json

@@ -0,0 +1,32 @@
+{
+ "name": "ng2-ion-range-slider-example",
+ "version": "0.0.0",
+ "license": "MIT",
+ "scripts": {
+ "ng": "ng",
+ "start": "ng serve",
+ "build": "ng build"
+ },
+ "private": true,
+ "dependencies": {
+ "@angular/common": "^2.4.0",
+ "@angular/compiler": "^2.4.0",
+ "@angular/core": "^2.4.0",
+ "@angular/forms": "^2.4.0",
+ "@angular/http": "^2.4.0",
+ "@angular/platform-browser": "^2.4.0",
+ "@angular/platform-browser-dynamic": "^2.4.0",
+ "@angular/router": "^3.4.0",
+ "core-js": "^2.4.1",
+ "rxjs": "^5.1.0",
+ "zone.js": "^0.7.6",
+ "ng2-ion-range-slider": "^1.0.1"
+ },
+ "devDependencies": {
+ "@angular/cli": "1.0.0-rc.2",
+ "@angular/compiler-cli": "^2.4.0",
+ "@types/node": "~6.0.60",
+ "ts-node": "~2.0.0",
+ "typescript": "~2.0.0"
+ }
+}

example/src/app/app.component.css

@@ -0,0 +1,10 @@
+#container {
+ max-width: 700px ;
+ margin-left: auto ;
+ margin-right: auto ;
+}
+.flex-container {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+}

example/src/app/app.component.html

@@ -0,0 +1,38 @@
+<div id="container">
+ <h1>Simple Slider ({{simpleSlider.onUpdate?.from}})</h1>
+ <ion-range-slider [min]="min" [max]="max" (onChange)="update(simpleSlider, $event)"></ion-range-slider>
+
+ <h1>Advanced Slider ({{advancedSlider.onUpdate?.from}} - {{advancedSlider.onUpdate?.to}})</h1>
+ <p><button (click)="setAdvancedSliderTo(20,80)">Update Slider to 20 - 80</button></p>
+ <ion-range-slider #advancedSliderElement
+ type="double"
+ min="0"
+ max="100"
+ from="28"
+ from_min="10"
+ from_max="30"
+ from_shadow="true"
+ to="40"
+ to_min="40"
+ to_max="90"
+ to_shadow="true"
+ grid="true"
+ grid_num="10"
+ prefix="Weight: "
+ postfix=" million pounds"
+ decorate_both="false"
+ (onUpdate)="update(advancedSlider, $event)"
+ (onChange)="update(advancedSlider, $event)"
+ (onFinish)="finish(advancedSlider, $event)"></ion-range-slider>
+ <div class="flex-container">
+ <div>
+ <h2>onUpdate</h2>
+ <pre>{{advancedSlider.onUpdate | json}}</pre>
+ </div>
+
+ <div>
+ <h2>onFinish</h2>
+ <pre>{{advancedSlider.onFinish | json}}</pre>
+ </div>
+ </div>
+</div>

example/src/app/app.component.ts

@@ -0,0 +1,32 @@
+import {Component, ViewChild} from '@angular/core';
+import {IonRangeSliderComponent} from "ng2-ion-range-slider";
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+
+ @ViewChild('advancedSliderElement') advancedSliderElement: IonRangeSliderComponent;
+
+ min: number = 1;
+ max: number = 10;
+
+ simpleSlider = {name: "Simple Slider"};
+ advancedSlider = {name: "Advanced Slider"};
+
+ update(slider, event) {
+ console.log("Slider updated: " + slider.name);
+ slider.onUpdate = event;
+ }
+
+ finish(slider, event) {
+ console.log("Slider finished: " + slider.name);
+ slider.onFinish = event;
+ }
+
+ setAdvancedSliderTo(from, to) {
+ this.advancedSliderElement.update({from: from, to:to});
+ }
+}

example/src/app/app.module.ts

@@ -0,0 +1,22 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+import { IonRangeSliderModule } from "ng2-ion-range-slider";
+
+@NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule,
+ IonRangeSliderModule
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }

example/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+ production: true
+};

example/src/environments/environment.ts

@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+ production: false
+};

example/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>ng2-ion-range-slider-example</title>
+ <base href="/">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+ <app-root>Loading...</app-root>
+</body>
+</html>

example/src/main.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);