title: Why is onchange event not firing on first change?
body: <p>Thank you for taking the time for reading my question.</p>
  
  <p>A "range" <code>input</code> element in HTML (Slider) fires an <code>onchange</code> -event, in which the content of a <code>span</code> element gets updated with the current value of the <code>input</code> element. </p>
  
  <p>Somehow, the first change made to the <code>input</code> element doesn't fire the <code>onchange</code> event. When an 'onclick' event is used, it does fire. </p>
  
  <p>Here's the code, HTML first:</p>
  
  <pre><code>&lt;div&gt;
  
      &lt;input id="main_options_plug1_lengthPE_input" type="range" step="10" value="0" max="200" min="0" onchange="setOpenEndPELength('plug1');"&gt;&lt;/input&gt;
      &lt;span id="main_options_plug1_lengthPE_value"&gt; … &lt;/span&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And now JavaScript:</p>
  
  <pre><code>function setOpenEndPELength(plug)
  {
      if (plug == "plug1" || plug == "plug2")
      {
          var slider = document.getElementById("main_options_" + plug + "_lengthPE_input");
          var span = document.getElementById("main_options_" + plug + "_lengthPE_value");
  
          span.innerHTML = slider.value + " mm";
      }
  }
  </code></pre>
  
  <p>I created a <a href="http://jsfiddle.net/4Md8f/2/" rel="nofollow">JSFiddle</a>, so you can try it yourself.</p>
  
  <p>I didn't find an answer to this question on stackoverflow so far, any questions i found were about <code>onchange</code> event don't firing at all. In this case, it's only the first change that doesn't work. </p>
  
  <p>Hope someone knows the answer. Any help is greatly appreciated, thanks in advance.</p>