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:
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 |