<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">This is a bug.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When rendering a range input element, the value of the input isn't set on the initial render. You have to call render again for the value to get picked up.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> or similar (template: <a href="https://jsfiddle.net/reactjs/69z2wepo/" rel="nofollow">https://jsfiddle.net/reactjs/69z2wepo/</a>).</strong></p>
<p dir="auto">I've created a demo here, <a href="https://jsfiddle.net/caozilla/qchxo3qb/4/" rel="nofollow">https://jsfiddle.net/caozilla/qchxo3qb/4/</a>.</p>
<p dir="auto">The demo includes a component called Test which simply renders an range input component by passing some props. There is an update button which calls setState and should trigger the render. There are also console.log statements which show the values being used during the render.</p>
<p dir="auto">When you run the demo you'll notice that you have to click the update button twice before the input value updates. The strange thing is that it seems to have something to do with the min and max attributes of the input. There is a commented out line where it does <code class="notranslate">var max = 100</code> and that seems to work fine on initial render. But when it references the state value, it doesn't work.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">The input value should be set properly on initial render.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">This affects React 15.2.0. It works fine in 15.1.0. I've only tested on the latest Chrome.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug<br>
<strong>What is the current behavior?</strong><br>
React at the beginning rounds <code class="notranslate">input[type=range]</code> value to 0 or 1, and then looks at step parameter which is 0.1 for example. The result is incorrect value of input after component mounts. When I put <code class="notranslate">value</code> attribute after <code class="notranslate">step</code> attributes, it works fine.<br>
<strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> or similar (template: <a href="https://jsfiddle.net/reactjs/69z2wepo/" rel="nofollow">https://jsfiddle.net/reactjs/69z2wepo/</a>).</strong><br>
Demo: <a href="https://jsfiddle.net/2Lm4gy5k/" rel="nofollow">https://jsfiddle.net/2Lm4gy5k/</a> Comment or uncomment line 13 and 14 to see the difference.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
To always look at step parameter and then round the value (if required).<br>
<strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
v15.1.0 (Opera, Chrome, Firefox).</p>
<p dir="auto">Yes, works in v.0.14.0 (<a href="https://jsfiddle.net/wrcnLugd/" rel="nofollow">https://jsfiddle.net/wrcnLugd/</a>)</p>