A tutorial for making sliders with HTML and Javascript

Karen McClellan
Apr 26 · 2 min read

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:

  • index.html
  • main.js
  • main.css

Install d3.js

Download d3.js and unzip to your project folder, or alternatively you can link to the script at the bottom of your html file:

<script src="https://d3js.org/d3.v5.min.js"></script>

Install d3-simple-slider via Terminal with npm install d3-simple-slider or you can download from GitHub.

Set up your HTML & CSS

I’ll leave the CSS up to you, but here’s a basic setup for index.htmlwith 2 div elements we’ll end up calling on in our main.js file.

The first, id="mood", contains an SVG, which is what we’ll manipulate with the sliders. (I generated the SVG using Blobmaker) The second, id="slider-color-picker", is empty for now. The JavaScript will do the work of building out the slider.

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!

Helpful Resources

Better Programming

Advice for programmers.

Karen McClellan

Written by

Masters Student, UX/Product Design | CMCI Studio, CU Boulder

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade