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


Keywords
Angular 2, Angular 4, d3, d3.js, slider, range, input range, Angular slider, Angular 2 slider, ng2 slider, Angular range, Angular input range
License
MIT
Install
npm install ng-d3-slider@1.0.4

Documentation

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 [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'"
 [thumbColor]="'pink'" [thumbSize]="8"></div>
  • color, emptyColor 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>