Description
Do you want to request a feature or report a bug?
This is a bug.
What is the current behavior?
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.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).
I've created a demo here, https://jsfiddle.net/caozilla/qchxo3qb/4/.
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.
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 var max = 100 and that seems to work fine on initial render. But when it references the state value, it doesn't work.
What is the expected behavior?
The input value should be set properly on initial render.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
This affects React 15.2.0. It works fine in 15.1.0. I've only tested on the latest Chrome.