Question

有没有办法将多个html5滑块字段组合在一起。最初我试过这样做type=number字段，但我不喜欢它的样子。

所以我所拥有的是7个字段，我想使用单个最小值为0且最大值为100的滑块 - 但是 - 诀窍是我需要一种方法将它们全部添加以确保总计它们相等。不需要单独的字段。那有意义吗？

这是我尝试的功能，但它根本不起作用：

<script>
function percentageTest() {

    // Get the value of the input fields
    a = document.getElementById("cuts").value;
    b = document.getElementById("burns").value;
    c = document.getElementById("infection").value;
    d = document.getElementById("dermatitis").value;
    e = document.getElementById("puncture").value;
    f = document.getElementById("sprain").value;
    g = document.getElementById("impact").value;

    var x = (a + b + c + d + e + f + g);

    // grouping together and doing the math
    if (x != 100) {
        text = "The total percentage must equal 100%";
    } 
    document.getElementById("rec_injuries").innerHTML = text;
}
</script>

Answer 1

你可以做这样的事情（只需使它漂亮并根据你的需要调整它）：

<强> HTML

others

<强>的JavaScript

<form>
  <formgroup class="ranges">
    <input type="range" min="0" max="100">
    <input type="range" min="0" max="100">
    <input type="range" min="0" max="100">
    <input type="range" min="0" max="100">
  </formgroup>
</form>

Answer 2

@Dave Gomez答案更优雅，请使用它。但如果你想知道为什么它不起作用：

您的document.getElementById("cuts").value;返回字符串。在添加它们之前，您需要将它们转换为int。这可以这样做：

a = +document.getElementById("cuts").value;
b = +document.getElementById("burns").value;
... etc

如何将HTML5 Range Slider值组合在一起？

2 个答案: