Input rangeスライダーの自動再生について(HTML, JavaScript)

Question

実現したいこと

スタートボタンを押すとスライダーがカウントアップし、スライダーがプログレスバーのようにスライドする。

質問

HTMLとJavaScriptを使って下記のプログラムを実装しています。
しかし、スタートボタンを押しても、input rangeのスライダーが右にスライドしていきません。
右にスライドしていくには、どうのような実装が必要でしょうか？
宜しくお願い致します。

該当のソースコード

<input type="range" id="data-range" min="0" max="5" value="0">
<button id="start">start</button>

var initialStart = 0;
var initialEnd = 10;
var step = 1;
var count = initialStart;

var dataRange = document.getElementById("data-range")
var startButton = document.getElementById("start")

var countup = () => {
    dataRange.setAttribute("value", (count = count + step));
    console.log(dataRange.getAttribute("value"))
};

startButton.addEventListener("click", () => {
	var id = setInterval(() => {
        countup();
		if (count > initialEnd - step) {
			clearInterval(id);
        }
	}, 100);
	count = initialStart;
});

Answer 1

こんにちは

以下のように修正してみると、いかがでしょうか？

修正前：

dataRange.setAttribute("value", (count = count + step));

修正後：

count += step;
dataRange.value = count;

• **動作確認用CodePen: **https://codepen.io/jun68ykt/pen/BayoJwX?editors=1011

参考までに、以下は、MDN element.setAttribute の注記からの引用です。

setAttribute() を使ってある属性、XUL や HTML の特別な値、および HTML の選択領域の変更は、属性がデフォルト値を特定している場合に一貫性の無い動作となります。現在の値にアクセスしたり、変更したりするにはプロパティを使用すべきです。具体例として、 elt .setAttribute('value', val ) の代わりに elt .value を使用します。

Comments

[haruyasu]

回答ありがとうございます。
スライダーが移動することを確認できました。

[jun68ykt]

どういたしまして。意図通り動いたようで、よかったです????