<!DOCTYPE html>
<html>
<head>
<base href="." />
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest'
</script>
<title>Angular4+D3.js = Awesome range slider</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
h4{
margin:5px;
}
p{
margin:2px;
}
### Angular Starter Plunker - Typescript
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'tslib': 'npm:tslib@1.6.1',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, Directive, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { D3SliderDirective } from 'd3-v4-slider.ts';
@Component({
selector: 'my-app',
template: `
<h1>A simple, yet powerful range slider</h1>
<p>Unlike the regular and boring html input range slider, this baby is pure SVG
created using <span style="color:rgb(255, 51, 0);font:bold">Angular2</span>
modularity combined with <span style="color:rgb(102, 51, 0);font:bold"> D3.js</span>
capabilities<p>
<p>Easy to modify Easy to style</p>
<p>For further How-To-Use check out the README.md file (did I get to that yet?)</p>
<hr>
<p>Here are some examples:</p>
<h4>A basic slider</h4>
<span style="float:left">Long:</span> <div ngD3Slider [disable]='toggleDisable' style="float:left" id="slider_long" [length]="200"></div>
<span style="float:left">Short:</span> <div ngD3Slider [disable]='toggleDisable' id="slider_short" [length]="10"></div>
<h4>Minimum Value, Maximum Value and Initial value added</h4>
<div ngD3Slider id="slider2" [disable]='toggleDisable' [length]="200" [maxValue]="maxValue" [minValue]="minValue"
[initialValue]="initilalValue" (selectedValue)="selectedValue($event)"></div>
<span>Min Value : {{this.minValue}} </span>
<span>Max Value : {{this.maxValue}}</span>
<div>send Value to parent component: {{value}}</div>
<h4>And now, in the other direction</h4>
<div ngD3Slider id="slider_rtl" [direction]="'RTL'" [disable]='toggleDisable' [length]="200" [maxValue]="maxValue" [minValue]="minValue"
[initialValue]="initilalValue" (selectedValue)="selectedLTRValue($event)"></div>
<div>send Value to parent component: {{valueLtr}}</div>
<h4>And Vertical:</h4>
<div style="float:left" ngD3Slider id="slider_vertical" [disable]='toggleDisable' [vertical]="'true'" [length]="50"></div>
<div ngD3Slider id="slider_vertical_rtl" [disable]='toggleDisable' [vertical]="'true'" [direction]="'RTL'" [length]="50"></div>
<h4>Now let's play with some styling properties:</h4>
<div ngD3Slider id="slider_style" [disable]='toggleDisable' [length]="200" [lineWidth]="lineWidth" [color]="primaryColor"
[emptyColor]="secondaryColor" [thumbColor]="circleColor" [thumbSize]="circleSize" [initialValue]="0.5"></div>
<button (click)="changeStyle()">Change style</button>
<h4> And now, {{toggleDisableText}} all slider at once: </h4>
<button (click)='changeDisable()'>{{toggleDisableText}}</button>
`,
})
export class App {
value;
valueLtr
minValue;
maxValue;
initilalValue;
primaryColor;
secondaryColor;
lineWidth;
circleColor;
circleSize;
toggleDisable;
toggleDisableText;
constructor() {
this.minValue = 100;
this.maxValue = 200;
this.initilalValue = 150;
this.value = this.initilalValue;
this.valueLtr = this.initilalValue;
this.primaryColor = 'blue';
this.secondaryColor = 'orange';
this.lineWidth = 7;
this.circleColor = 'pink';
this.circleSize = 8;
this.toggleDisable = 'enable'
this.toggleDisableText = 'disable'
}
selectedValue(iSelectedValue){
this.value = iSelectedValue
}
selectedLTRValue(iSelectedValue){
this.valueLtr = iSelectedValue
}
changeStyle(){
this.primaryColor = this.primaryColor=='blue'?'red':'blue';
this.secondaryColor = this.secondaryColor=='orange'?'yellow':'orange';
this.lineWidth = this.lineWidth<10?10:4;
this.circleColor = 'pink';
this.circleSize = this.circleSize>5?5:9;
}
changeDisable(){
if(this.toggleDisable == 'enable'){
this.toggleDisable = 'disable'
this.toggleDisableText = 'enable'
}else{
this.toggleDisable = 'enable'
this.toggleDisableText = 'disable'
}
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App,D3SliderDirective ],
bootstrap: [ App ]
})
export class AppModule {}
import {Directive, OnInit, OnChanges, SimpleChanges, Input, Output, EventEmitter, ViewContainerRef} from '@angular/core';
import * as d3 from 'https://d3js.org/d3.v4.min.js'
@Directive({
selector: '[ngD3Slider]'
})
export class D3SliderDirective implements OnInit, OnChanges{
id:string;
@Input() disable:string;
@Input() length:number;
@Input() maxValue:number;
@Input() minValue:number;
@Input() initialValue:number;
@Input() lineWidth:number;
@Input() color:string;
@Input() emptyColor:string;
@Input() thumbColor:string;
@Input() thumbSize:number;
@Input() direction:string;
@Input() vertical:string;
@Output() selectedValue = new EventEmitter();
private value;
constructor(slider:ViewContainerRef) {
this.maxValue = 1;
this.minValue = 0;
this.value;
this.initialValue = null;
this.color = "#51CB3F";
this.emptyColor = "#ECECEC";
this.thumbColor = "white";
this.lineWidth = 6;
this.thumbSize = 6;
this.direction = "LTR";
this.id = slider.element.nativeElement.id;
}
ngOnInit() {
}
ngOnChanges(changes: SimpleChanges){
let selection;
if(!this.initialValue&&changes['initialValue']&&changes['initialValue'].firstChange){
this.initialValue = this.minValue;
}
if(!this.value){
this.value = this.initialValue;
}
d3.select("#"+this.id).selectAll("*").remove();
if(this.vertical=="true"){
selection = d3.select("#"+this.id).append("svg").attr('height',this.length+20).attr("viewBox", '0,-10,'+'30,'+(this.length+20));
}else{
selection = d3.select("#"+this.id).append("svg").attr('width',this.length+20).attr("viewBox", '-10,0,'+(this.length+20)+',30');
}
this.createSlider(selection)
}
createSlider(selection){
let that= this;
var direction = this.direction;
var width = this.length;
var maxValue = this.maxValue;
var minValue = this.minValue;
var value = this.value;
var color;
var emptyColor;
if(direction=='RTL'){
emptyColor = this.color;
color = this.emptyColor;
}else{
emptyColor = this.emptyColor;
color = this.color;
}
var thumbColor = this.thumbColor;
var lineWidth = this.lineWidth;
var thumbSize = this.thumbSize;
var NormValue = this.setNormValue(value,minValue,maxValue,direction);// value normalized between 0-1
var mainAxis;
var secondaryAxis;
if(this.vertical=="true"){
mainAxis = "y";
secondaryAxis = "x"
}else{
mainAxis = "x";
secondaryAxis = "y"
}
var selectedValue;
function dragEnded() {
selectedValue = d3.event[mainAxis];
if (selectedValue < 0)
selectedValue = 0;
else if (selectedValue > width)
selectedValue = width;
NormValue = selectedValue/ width;
valueCircle.attr("c"+mainAxis, selectedValue);
valueLine.attr(mainAxis+"2",width * NormValue);
emptyLine.attr(mainAxis+"1", width * NormValue);
if (event)
event(NormValue);
d3.event.sourceEvent.stopPropagation();
}
//Line to represent the current value
var valueLine = selection.append("line")
.attr(mainAxis+"1", 0)
.attr(mainAxis+"2", width * NormValue)
.attr(secondaryAxis+"1", 10)
.attr(secondaryAxis+"2", 10)
.style("stroke", color)
.style("stroke-linecap", "round")
.style("stroke-width", lineWidth);
//Line to show the remaining value
var emptyLine = selection.append("line")
.attr(mainAxis+"1", width * NormValue)
.attr(mainAxis+"2", width)
.attr(secondaryAxis+"1", 10)
.attr(secondaryAxis+"2", 10)
.style("stroke", emptyColor)
.style("stroke-linecap", "round")
.style("stroke-width", lineWidth);
//Draggable circle to represent the current value
var valueCircle = selection.append("circle")
.attr("c"+mainAxis, width * NormValue)
.attr("c"+secondaryAxis, 10)
.attr("r", thumbSize)
.style("stroke", "black")
.style("stroke-width",1)
.style("fill", thumbColor);
if(that.disable!="disable"){
valueCircle.call(d3.drag().on("drag", dragEnded)).style("cursor","hand");
}
function event(iNewValue){
that.value = that.setDenormValue(iNewValue,minValue,maxValue,direction);
that.selectedValue.emit(that.value)
}
}
/**
* Normalizes the values to a range between 0 to 1
* @param iValue
* @param iMinValue
* @param iMaxValue
* @param iDirection
* @returns {number}
*/
setNormValue(iValue:number,iMinValue:number,iMaxValue:number,iDirection:string){
if(iDirection==="LTR"){
return (iValue-iMinValue)/(iMaxValue-iMinValue);
}else if(iDirection==="RTL"){
return 1-(iValue-iMinValue)/(iMaxValue-iMinValue);
}
}
/**
* Converts to normalized value according to the min-max range given
* @param iValue
* @param iMinValue
* @param iMaxValue
* @param iDirection
* @returns {Number}
*/
setDenormValue(iValue:number,iMinValue:number,iMaxValue:number,iDirection:string){
if(iDirection=="LTR"){
return Number((iValue*(iMaxValue-iMinValue)+iMinValue).toFixed(2));
}else if(iDirection==="RTL"){
return Number(((1-iValue)*(iMaxValue-iMinValue)+iMinValue).toFixed(2));
}
}
}