概要
-
<input>要素のrangeタイプの値を別の要素へ表示するサンプルコード - Chromeで確認。IEは動かないと思われます
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript">
window.onload = () => {
// (1)イベントを設定
for (var element of document.getElementsByClassName('range')) {
element.addEventListener('input', (event) => {
// (2)ソース要素のvalueを次（隣）の要素のinnerHTMLへセット
event.srcElement.nextElementSibling.innerHTML = event.srcElement.value;
});
}
// (3)初期表示するためにイベントを起こす
for (var element of document.getElementsByClassName('range')) {
element.dispatchEvent(new Event('input'));
}
}
</script>
</head>
<body>
<div>
<label>range A</label>
<input type="range" class="range" value="50"><span></span>
</div>
<div>
<label>range B</label>
<input type="range" class="range" value="50"><span></span>
</div>
</body>
</html>
説明
html部
- rangeタイプのinput要素を2つ配置しています
- （「1つだけ対応する」と「2つ以上を対応する」とではアプローチが異なる場合がよくあります）
- input要素の次（隣）に値表示用のspan要素を配置しています
- サンプルを単純にするため、位置で決め打ちにしています
script部
(1)イベントを設定
- rangeクラスの要素全てに
inputイベントリスナーを設定しています
(2)値の表示
- (1)のイベント処理です
- srcElementはつまり
<input type='range' class='range'>になります - srcElementの値(value)を、srcElementの隣の要素、この場合は表示用のspan要素にセットしています
(3)初期表示
- ページロード時、同じ処理を通して値を表示するため、
inputイベントを起こしています- 処理部分を切り出してcallのほうが良いかもしれません