Slid3r NPM | npm.io

slid3r

A simple d3 slider that is meant to be placed inside your svg.

What and Why

slid3r is a tiny library that uses d3 to make simple slider inputs. I constantly find myself wanting to implement sliders in my projects but find that the default html ones are ugly, or if I use some of the better alternatives I have to load JQuery or something else and bog-down my project. Other d3-based slider efforts require the slider to be contained in a div, which I find isn't always what I want/need.

A benefit of having the slider implemented straight in the svg is the ability to move it around the visualization programatically using .attr('transform',...). This is especially useful when you have more complex visualizations with dynamic interfaces.

In action

This bl.ock demonstrates the minimum viable product for using the library. In addition, this blogpost I wrote uses it in an intereactive.

Getting it into your project

Currently the library is bundled to be used in a script tag. If you want to use it just add

<script src="https://rawgit.com/nstrayer/slid3r/master/dist/slid3r.js"></script>

somewhere above the javascript you call slid3r in.

API

Currently you get one single function. That function is slider(). Attached to this function are a few getter-setter functions as described in Mike Bostock's Towards Reusable Charts article. An example use of the function is as follows:

const mySlider = slid3r()
    .width(200)
    .range([0,10])
    .startPos(3)
    .label('Super Cool Slider')
    .loc([50, 50])
    .onDone(pos => console.log('slider set to', pos));
  
 svg.append('g').call(mySlider);

Result:

npm.io

All current options are as follows:

name	purpose	arguments	default
.label	Text for above slider	string	`'choose value'`
.range	Slider's possible values	array (`[startVal, endVal]`)	`[0,10]`
.startPos	Value that the slider starts at	number (in set range)	`0`
.clamp	Should slider report position rounded to nearest integer?	boolean	`true`
.width	Width of slider	number (represents pixels)	`250`
.loc	Where the slider sits on the svg	array (`[leftEdgeX, topEdgeY]`)	`[0,0]`
.onDone	Callback for after slider is dragged	function (takes position on the slider as first argument)	`(x) => console.log('done dragging', x)`
.onDrag	Called continuously as slider is moving	function (that takes position on the slider as first argument)	`(x) => null`
.font	Font family of the number ticks and label	string (valid css font-family)	`'optima'`
.animation	Should slider animate the clamping to nearest integer?	number (milliseconds for animation) or false (to disable)	`200`