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