javascript - 如何在 html 中创建这些可拖动设置栏之一？

Question

我见过那些随机设置的可拖动设置栏，但​​我似乎不记得它们叫什么，因此我很难在谷歌上搜索它。

这是其中一个条形图，如果向右拖动，值会增加，如果向左拖动，值会减小。

在 html/css/js 中创建其中之一的最简单方法是什么？

Answer 1

你要找的是一个范围，是一个输入元素:

<input type="range" min="1" max="10">

要获得输出，您可以使用 JavaScript 和 <output> :

<form oninput="x.value=parseInt(a.value)">
<input type="range" id="a" value="50">
<output name="x" for="a b"></output>
</form>

JSFiddle Example