Chrome overrides value if superior to max value of input[type=range] because Vue sets attributes in the same order as they are provided

[stevelacey]

Version

2.6.6

Reproduction link

https://codepen.io/posva/pen/LqMMNV

Steps to reproduce

• set value attribute before max with a value > 100 on Chrome

What is expected?

Vue should respect the value attr regardless of whether it is outside of the bounds of the default min/max threshold

What is actually happening?

Vue sets the value to 100 if it is >100

[stevelacey]

I made the example better by sticking a delay in before loading Vue:
https://jsfiddle.net/kvwsmnc6/2/

And I noticed that default browser behaviour is that values >100 are not accepted because of the default min/max.

So I suspect this does boil down as I said to "Vue does not support range min/max" – the only slider that is actually behaving unlike the browser default is the last one in my example, where min and max are supplied.

[stevelacey]

Updated to reflect above:
https://jsfiddle.net/kvwsmnc6/3/

[posva]

There are many things going on here, first it seems to be browser related, as it doesn't happen on Safari. On chrome it seems the value is coerced to 100 by the browser. When providing the min/max attributes, the order matters because if the value is set before max, it will have a default max of 100 on Chrome (apparently), so doing

<input type="range" min="0" max="1000"  value="200">

will fix the problem

I'm not sure we should workaround this. It's already very weird for Chrome to setup a default of 100 but I haven't checked the spec on this

[stevelacey]

Wow, can confirm that reordering the attributes does workaround the problem, and you're right, it doesn't happen in Safari.

[marcus-hiles]

yep, reordering works for me. Thanks @posva