Javascript 如何在HTML5中制作具有4种状态的选项滑块？

我在一个小型的个人HTML5网站上工作，以学习为目的，我一直在编写一个滑块，通过在条上滑动按钮可以选择4个选项（从好到坏）

结果应该能够触发一些代码，以便在其他地方更改显示

我确信有很多关于这个的教程，但我似乎无法找到滑块名称的正确方法。当我在谷歌上搜索选项滑块时，我最终得到了我想要的图像滑块和/或谷歌图像

我相信这不会那么棘手，但我只是不知道怎么做，因为这是我的第一次尝试

<label for="weight">Option</label>
<input id="weight" min="0" value="0" max="3" step="1">

选项

---

我做过的一些搜索：例如：

您可以尝试以下内容：

<label for="weight">Option</label>
<input type="range" id="weight" min="0" value="0" max="3" step="1" list="volsettings">
<datalist id="volsettings">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</datalist>

选项
0
1.
2.
3.

数据列表

只是将勾号放在适当的位置。您可以“查看”该值，并显示四个“选项”中选择的选项

参考：

编辑

---

一些使用选项：

您可以尝试以下方法：

<label for="weight">Option</label>
<input type="range" id="weight" min="0" value="0" max="3" step="1" list="volsettings">
<datalist id="volsettings">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</datalist>

选项
0
1.
2.
3.

数据列表

只是将勾号放在适当的位置。您可以“查看”该值，并显示四个“选项”中选择的选项

参考：

编辑

---

一些使用选项：

如果不清楚滑块的概念，就不可能回答这个问题。那么，整个事情对于这个网站来说，一开始就太宽泛了。对不起，查理，我不明白你的意思。如果你不明白我所说的滑动条是什么意思，我给了你一张谷歌图片。我试着尽可能地解释它，但我真的不知道它叫什么。我所需要的只是一个简单的滑块（比如说线条），上面有一个按钮，可以来回拖动来选择如图所示的给定选项。应该不难在web上找到很多不同的选项。确保在搜索问题中使用术语javascript或html，如果不清楚滑块的概念，就不可能回答这个问题。那么，整个事情对于这个网站来说，一开始就太宽泛了。对不起，查理，我不明白你的意思。如果你不明白我所说的滑动条是什么意思，我给了你一张谷歌图片。我试着尽可能地解释它，但我真的不知道它叫什么。我所需要的只是一个简单的滑块（比如说线条），上面有一个按钮，可以来回拖动来选择如图所示的给定选项。应该不难在web上找到很多不同的选项。确保您在搜索中使用javascript或html。谢谢，您能告诉我如何在滑块的任一侧编写文本吗。例如，如果我想让左边说“好”，右边说“坏”。您还可以帮助我检查选择了什么值，并让它在javascript中执行某种功能。例如如果slider=1，则执行此操作。这些实际上是单独的问题；我添加了一个提琴，显示如何使用跨度来区分好坏（可能需要一些CSS来进行样式设置。此外，还显示了如何直接使用输入值）（您可以使用case语句或触发其他代码。谢谢您的帮助，您能告诉我如何在滑块的任一侧写入文本吗？例如，如果我想让左侧说good，右侧说bad。您能帮助我如何检查已选择的值并使其执行某种功能吗例如，如果slider=1，那么这样做实际上是两个独立的问题；我添加了一个小提琴，显示如何使用跨度来区分好坏（可能需要一些CSS来设置样式。此外，还显示了直接使用输入值（您可以使用case语句或触发其他代码）。