How to build sliders with d3.js
I’m coding a prototype of a key user flow, and needed to create the ability for test users to customize the look of a blob. For the prototype controls, I decided to use d3.js to create sliders that the test users can manipulate. This tutorial walks through the steps I took to build out the sliders, as well as the resources I found useful along the way.
Set up your work space.
Set up your files in a directory:
Download d3.js and unzip to your project folder, or alternatively you can link to the script at the bottom of your html file:
Set up your HTML & CSS
I’ll leave the CSS up to you, but here’s a basic setup for
div elements we’ll end up calling on in our
id="mood", contains an SVG, which is what we’ll manipulate with the sliders. (I generated the SVG using Blobmaker) The second,
Set up main.js.
Let’s walk through the script. First, we set variables for the SVG and the colorSlider
div we set up in index.html
Next, we write a function that will convert RGB values to hex:
Then we select the
div we named in
index.html and append an SVG that essential acts as a canvas for the 3 RGB sliders we’ll call in a minute.
Next, we name the function that calls and styles the sliders for each of R, G, and B. (For different styles of sliders, check out John Walley’s tutorial.) This script also changes the color of the blob to the rgb values chosen on the sliders. Finally, you invoke the slider canvas and call the slider function.
Test it out and tweak as needed
You should have a working blob and rgb slider set now. Play around with it and make changes as needed!