NgD3Slider

Unlike the regular and boring html input range slider, this baby is pure SVG created using Angular4 modularity combined with D3.js v4 capabilities

Check out the Demo on Plunker

Check out the source code on Github

Easy to modify Easy to style

Install

$ npm install ng-d3-slider --save

Then add the following code at the top of your app.module.ts file

import {D3SliderDirective} from 'ng-d3-slider/d3-slider.directive'

And you're good to go!!!

How to use

First try

For a simple default slider all you gotta do is add the directive name to a div with an id attr and an Angular input attr called length with a number value Example:

 <div ngD3Slider id="slider1"  [length]="200"></div>

Now you can play with the slider by adding all the possible attributes suggested below

List of Attributes

|Attribute Type| Key | Type | Default value|Example | |--------------|:-----------------------|:-------|--------------|-----------------| |HTML attr |id |string |- required| | |Input |[length] |number |- required|example| |Input |[maxValue] |number | 1 |example| |Input |[minValue] |number | 0 |example| |Input |[step] |number | 1 |example| |Input |[initialValue] |number | null |example| |Input |[lineWidth] |number | 6 |example| |Input |[color] |string | "#51CB3F" |example| |Input |[emptyColor] |string | "#ECECEC" |example| |Input |[thumbColor] |string | "white" |example| |Input |[thumbStroke] |string | black |example| |Input |[thumbStrokeWidth] |number | 1 |example| |Input |[thumbSize] |number | 6 |example| |Input |[direction] |string | "LTR" |example| |Input |[vertical] |boolean | false |example| |Input |[disable] |string | null |example| |Output |(selectedValue) |function| |example|

Examples

Playing with values

<div ngD3Slider id="slider2" [length]="200" [maxValue]="200"
[step]="5" [minValue]="100" [initialValue]="150"
(selectedValue)="selectedValue($event)"></div>

• maxValue should always be greater than minValue
• initialValue should always be greater than minValue and smaller than maxValue
• selectedValue returns the value selected after the slider's thumb is released

Styling the slider

<div ngD3Slider id="slider3" [length]="200" [lineWidth]="7"
 [color]="'#456789'" [emptyColor]="'orange'"
 [thumbStroke]="'#123FF4'" [thumbStrokeWidth]="2"
 [thumbColor]="'pink'" [thumbSize]="8"></div>

• color, emptyColor, 'thumbStroke' and thumbColor could be given hex,rgb,rgba or html color strings
• thumbSize maximum value is 10

Change direction of slider

<div ngD3Slider id="slider4" [length]="200" [direction]="'RTL'" >
</div>

• direction possible values are RTL and LTR

Vertical slider

<div ngD3Slider id="slider5" [length]="200" [vertical]="'true'" >
</div>

Disable slider

<div ngD3Slider id="slider6" [length]="200" [disable]="'disable'" ></div>