Range Input: Order of Attributes Bug

I stumbled upon a bug while working with Preact today. If you create an input range, the initial render of the slider position may be wrong, depending on the order of the attributes. The value attribute needs to be set after min/max/step. If value is applied before min/max/step are properly set, the value will be forced to match the default min=0/max=100/step=1 on a slider.

E.g. if you create two sliders:

// This one renders with the slider at 0
<input type="range" value={0.5} min="0" max="1" step="0.05" />

// This one renders with the slider at 0.5
<input type="range" min="0" max="1" step="0.05" value={0.5} />

See minimal code to reproduce here

When creating an dom element from a vnode, it looks like attributes are applied one at a time via a for...in loop. Since the ordering of keys in an object is arbitrary, it seems like diffAttributes needs to apply the attributes in a sorted way. I can’t think of other potential ordering pitfalls with attributes (maybe the react source code would have insights), but at the very least, applying value last should fix this issue.

[gpoitch]

Here’s the special input attr cases in react for reference: https://github.com/facebook/react/blob/8ab56e5c8b8f797a6b2bdd4188b4082c55a5190b/src/renderers/dom/stack/client/wrappers/ReactDOMInput.js#L58-L71

[mikewesthad]

@marvinhagemeister thanks! Closing my PR