制作一个超快速的简易滑块来玩一些值

更改 CSS 中的一些值并刷新浏览器窗口并不难。或者在 DevTools 中玩弄这些值。或者使用 样式注入 设置，其中有许多方法。但有时给自身（或其他人）提供一个传统 UI 控件来玩弄某个值也是不错的。

以下是一个使用 range 输入来控制 font-size 的简单示例

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 Range Slider Scaling。

首先，您需要一个范围滑块

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

然后，您在 JavaScript 中附加一个事件处理程序

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

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

每次滑块更改值时，都会调用该函数，您可以使用 this.value 访问滑块的当前值。

将其用于需要数字的任何用途！更改价格、更改颜色、更改大小。

这有点像简陋版的 dat.GUI。