<input type="range"> のvalueが丸められる

<input type="range"> の躓きメモ

JSで先にvalueを設定してもmin,max,stepの既定値で丸められるよ。
って話です。

JSの設定例

const input = document.createElement('input');
input.type = 'range';
// input.value = 0.4; //←先にvalueを設定するのはNG
input.min = 0;
input.max = 1;
input.step = 0.1;
input.value = 0.4; //←min,max,stepの後にvalueを設定しよう
document.body.append(input);

JSの設定例

const input = document.createElement('input');
input.type = 'number';
input.value = 0.4; //←ただしnumberは平気。
input.min = 0;
input.max = 1;
input.step = 0.1;
document.body.append(input);