Padding issues for <input type="range"

[tukasz]

By default, all input elements have a 12px left-right padding:

textarea,
select,
input {
	padding: 6px 12px;
	...
}

For an <input type="range" ... this causes an issue (at least in Chrome 83) with incorrectly rendering the input:

Min value:

Mid value:

Max value:

Without the left-right padding, the input is rendered correctly.

[kaihendry]

Hi, I just ran into the strange rendering behaviour myself https://dabase.com/tips/web/2021/Minimal-VueJS-route-bind

It also looks unusable on Safari https://s.natalian.org/2021-09-07/range.png in dark mode by default.. 😓