title: How to group together HTML5 Range Slider values?
body: <p>Is there a way to group together multiple html5 slider fields. Originally I tried doing this will <code>type=number</code> fields but I didn't like the way it looked. </p>
  
  <p>So what I what I have is 7 fields that I want to use sliders with individual min values of 0 and max values of 100 - however - the trick is that I need a way to add them all up to make sure in total they equal 100. None of the fields individually are required. Does that make sense? </p>
  
  <p>Here is the function I tried but its not working at all:</p>
  
  <pre><code>&lt;script&gt;
  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;
  }
  &lt;/script&gt;
  </code></pre>