Webmasters Gallery

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.

Make a Super Quick Little Slider to Play with Some Values is a post from CSS-Tricks