HTMLスライダーコントロールのスライダーの値 (つまみの位置)を取得する - JavaScript
HTMLスライダーコントロールのスライダーの値 (つまみの位置)を取得するコードを紹介します。
概要
HTMLスライダーのスライダーの値を取得する場合は、スライダーオブジェクトのvalue の値を取得します。
一般的にスライダーを利用する場合は、スライダーのつまみを変更したタイミングで新しいスライダーの位置を取得する場合が多いです。
スライダーが変更されたタイミングで値を取得する場合は、スライダーの
onchange イベント、
oninput イベントを利用します。
実装例
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function change_slider() {
var slider = document.getElementById("slider1");
var out_frame = document.getElementById("output");
out_frame.innerText = slider.value;
}
</script>
</head>
<body>
<p>スライダーコントロールの値の取得デモ</p>
<input id="slider1" type="range" value="50" min="1" max="100" onchange="change_slider();"/>
<p>スライダーの値</p>
<div id="output"></div>
</body>
</html>
解説
HTMLスライダーコントロールの記述は
こちらの記事を参照して下さい。
onchange 属性にスライダーが変化したときに呼び出す関数を設定します。今回の例では
change_slider()関数を呼び出します。
change_slider 関数では、getElementByIdメソッドを呼び出し、スライダーオブジェクトの要素を取得します。
スライダーの値は、スライダーオブジェクトの
value プロパティを参照します。
スライダーオブジェクトの value プロパティをid="output" の要素の位置に表示します。~
function change_slider() {
var slider = document.getElementById("slider1");
var out_frame = document.getElementById("output");
out_frame.innerText = slider.value;
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
スライダーをドラッグして位置を動かします。スライダーを移動させると、値が画面の下部に表示されます。
スライダーの位置を変更します。変更すると値も変化します。
参考 : addEventListenerを利用する場合
addEventListenerメソッドを利用する場合のコードです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var slider = document.getElementById("slider1");
slider.addEventListener('change', change_slider, false);
}
function change_slider() {
var slider = document.getElementById("slider1");
var out_frame = document.getElementById("output");
out_frame.innerText = slider.value;
}
</script>
</head>
<body>
<p>スライダーコントロールの値の取得デモ</p>
<input id="slider1" type="range" value="50" min="1" max="100"/>
<p>スライダーの値</p>
<div id="output"></div>
</body>
</html>
実行結果
HTMLファイルを表示し、ドラッグしてスライダーの位置を変更します。スライダーを変更するとページ下部の値も変化します。
先に紹介したonchangeい弁を利用した場合と同じ動作になります。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
