Javascript 用于天气应用的圆形滑块

我试图为动画寻找一个圆形滑块。它的工作原理如下：

<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
<span id="range">0</span>

---

但它需要绕一个圈，而不是水平滑动。有没有类似的东西已经建成了？我可能没有足够的经验从头开始构建它。

我相信您正在寻找的代码如下：

---

你所说的“像下面那样工作……但不要水平滑动……”是什么意思？您显示的代码根本没有动画。您可以滑动图标，但它必须在一个圆圈中，而不是水平移动（如示例所示）。。。。这是我发现的最接近的…“而不是水平移动（如示例所示）”-但是您的示例不会以任何方式滑动或设置动画。它所做的只是直接设置“range”元素的html内容。另外，元素在页面上已经可见，所以当你说“在一个圆中”时，你的意思是它应该从它在页面上已经在一个圆中的位置移动，并在它开始的位置结束吗？好的，想象一下滑块，它将在一个圆中而不是水平滑动，因为形状是一个圆而不是一条线（由本例中的输入表示）如果您想在javascript中构建它，则需要跟踪鼠标位置，然后使用简单三角法（SOHCAHTOA！）计算鼠标相对于滑块中心的角度，然后根据圆的角度和半径移动滑块元素。对不起，我现在还不知道任何文章，但是如果你查找我刚才描述的单个元素，应该不难找到一些东西！