inputタグのrangeの値(value)が文字列でドハマりした話

<input type="range" min="0" max="100" value="100" step="1" oninput="hogeValueChanged()">

こいつのvalueを使っているときに、意図しない動作に遭遇し、追っかけてみたら、文字列でした・・・(;・∀・)
仕様はちゃんと読みましょう。ってことですね。。。

inputタグのrangeのイメージ

こんな感じのコントロール（文字列は別）：

うまくいかなかった箇所をさらしてみる

curHue1 = hue1.value; とか代入しています。

    let diffHue = newHue0 - curHue0;
    curHue0 = newHue0;
    console.log("diff hue:");
    console.log(diffHue);
    console.log("hue1 before:");
    console.log(curHue1);
    curHue1 = (curHue1+diffHue+360)%360;
    console.log("hue1 after:");
    console.log(curHue1); // ここで NaN になることがある
    curHue2 = (curHue2+diffHue+360)%360;

仕様記載

<input type="range"> - HTML： HyperText Markup Language | MDN

value 属性は、選択された数値を表す文字列が入った DOMString です。

と

選択された数値を表す文字列を含む DOMString。 Number として値を取得するには valueAsNumber を使用する。