title: HTML range input doesn't update its value
body: <p>I created a range input in my markup, and set its value to 0, like so:</p>
  
  <pre><code>&lt;input type="range" min="0" max="100" step="10" value="0"&gt;
  </code></pre>
  
  <p>I want to style it based on its current value. Let's say I want to give it a margin-top of 50px if its value is "10". I write the following simple CSS rule:</p>
  
  <pre><code>[type="range"][value="10"] {
      margin-top: 50px;
  }
  </code></pre>
  
  <p>When sliding the range input to 10, one expects the rule to fire, but it doesn't. It does however fire when setting the input's value to "10" <strong>in the markup</strong>.</p>
  
  <p>Am I missing something here? Is there really no way to style a range input according to its value, as dynamically changed by the user, with CSS only?</p>