wsdm-slider

NOTE: In active development

Responsive slider component with playback mode for d3 charts (but certainly not limited to charts!), based on d3 drag. Has very simple usage, as demonstrated in the example.

Methods

Slider exposes 3 methods:

Method	Arguments	Description
create	(holder::DOMNode, config::Object)	holder is required, inside it the slider is created with the optional config
update	(config::Object)	Updates the slider with the new config
destroy	()	Destroys the slider, cleans up the DOM and removes the resize even handler

As you can see these 3 methods match nicely lifecycle methods from React, which makes it easy to integrate it into a React component:

• componentDidMount => slider.create
• componentDidUpdate => slider.update
• componentWillUnmount => slider.destroy

Options

Property	Type	Default	Description
domain	array	[ 0, 1 ]	The whole spectrum from which user can create the range selection
value	number	undefined	The value to which the slider should be set
margin	object	margin: { top: 0, right: 5, bottom: 0, left: 60 },	Spacing around the slider. Default setting gives just enough space to render the handles and outside ticks. Also provides the space for the play button on the left. See note on disabling the playback below.
playbackStep	number	0.05	The value will be increased by it when slider is played
step	number	1	If the values are not provided in the config, they will be generated by the slider with this interval. See the note on values below for more explanation
allowDecimal	boolean	false	By default slider rounds the value to the whole intiger. See the note on values below for more explanation
barHeight	number	10	Default slider height (height of the bar)
handleRadius	number	9	Default handle radius
showTip	boolean	false	Set to true if you want a tiny tooltip with the value that follows the handle
tipPosition	string	"bottom"	Determines where the tooltip is placed relative to the handle, if shown. Two options are possible "top" and "bottom"
onChange	function	undefined	Callback firing when user is interacting with the slider, has the current value as the parameter.
oPlayStart	function	undefined	Callback fired when user starts the playback, has the current value as the parameter.
oPlayEnd	function	undefined	Callback fired when user stops the playback, has the current value as the parameter.
valueFormat	function	v => v	By default no formatting is applied to the values produced by the slider. Use it for example if you want to have nicely rounded values, e.g. by passing Math.round to it.
tickFormat	function	v => niceNum(v)	Passed to d3 axis tick formatting. By default it will use internal method to produce nicely formatted numbers (1000000 => 1m). Simple trick to remove the ticks completely () => ""

Disabling the playback mode

Right now the only way to disable playback mode is to just hide the button via css

.wsdm-slider-play-background,
.wsdm-slider-play {
  display: none;
}

If you do that remember to adjust the left margin accordingly. It's a bit clunky way to disable the playback but we're not doing it so often. We may introduce a proper option for that in the future if it starts bothering us.

What's up with the values?

If the values are provided in the config then slider will allow only to pick from them, useful for irregular ranges (e.g. if you have missing years in your data set). If they are not provided, then a regular data set is assumed with a step of 1. You can change that with the config.step option if you need a different interval, e.g. if you need decimals.

Development

Run development server with:

$ npm i
$ npm start

Run tests with:

$ npm test

Build with:

$ npm run build

Example styling is included in example/slider.css

Lapidus Interactive