Interactive-slider NPM

Interactive Slider

Zoom compatible interactive slider, for dates and number. Easily display data availablity.

Image of D3 Slider

Uses d3 for rendering the axis.

Check out the examples:

import slider from 'interactive-slider';

then

slider(div, options={});

<script type="text/javascript" src="https://unpkg.com/interactive-slider"></script>

then

slider(div, options={});

The unique id of a div. The graph will be appended to this div and will automatically align to the div with.

Option	Description	Default	Type
onChange	Called with new handle values when adjusted	false	Function
onZoom	Called with new min & max when zoomed	false	Function
type	Type of slider (single/ double)	single	String
min	Minimum slider value	0	Number/ Date
max	Maximum slider value	1	Number/ Date
upper	Upper handle value (double slider)	max	Number/ Date
lower	Lower handle value (double slider)	min	Number/ Date
value	Handle value (single slider)	max	Number/ Date
availability	Array of start, end values for plotting	[]	Array
handleHeight	Height of the handles	20	Number
handleWidth	Width of the handles	2	Number
barColor	Availability bar color	#28b5f5	String
barHeight	Availability bar height	4	Number
tooltip	Show a tooltip on hover	true	Boolean
fontSize	Font size for axis and tooltip	10	Number
marginTop	Top margin in px	25	Number
marginLeft	Left margin in px	10	Number
marginBottom	Bottom margin in px	30	Number
marginRight	Right margin in px	10	Number
width	Set custom slider width in px	parent	Number
language	Select language for time axis. en, de, fr, es	en	String