Make a Super Quick Little Slider to Play with Some Values

Avatar of Chris Coyier
Chris Coyier on

Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!

It’s not all that hard to change some values in CSS and refresh a browser window. Or play with those values in DevTools. Or have a style injection setup, of which there are many ways. But sometimes it’s also nice to give yourself (or whoever else) a good ol’ fashioned UI control to play with a value.

Here’s a little example of a range input to control font-size:

See the Pen Range Slider Scaling by Chris Coyier (@chriscoyier) on CodePen.

First you need a range slider:

<input type="range" id="range" min="1.0" max="3.0" step="0.1" value="2.0" />

Then you attach an event handler to it in JavaScript:

var range = document.querySelector("#range");

range.addEventListener("input", function() {
  // do something with `this.value`
}

Every time that slider changes value, the function will be called, and you can access the slider’s current value with this.value.

Use it for anything you need a number for! Changing a price. Changing a color. Changing a size.

It’s kinda like a poor man’s dat.GUI.