スライダーの値をJavaScriptを使って取得・設定する

フォームで利用可能なスライダーで設定された値を JavaScript から取得したり設定したりする方法について解説します。スライダーは左右に移動するスライダーを使って値を選択するもので、事前に設定した最小値と最大値の間の数値を選択する場合に使用されます。スライダーを表示するには input 要素で type 属性に range を指定します。

(Last modified: )

HTMLでスライダーを作成する

HTML でスライダーを表示するには input 要素で type 属性に range を指定します。 

<input type="range">

デフォルトの設定では最小値が 0 、最大値が 100 、移動幅が 1 に設定されています。最小値を設定するには min 属性、最大値を設定するには max 属性に値を指定します。またスライダーの移動幅を設定するには step 属性に値を設定します。 

<input type="range" min="0" max="500" step="50">

スライダーの初期値を設定するには value 属性に値を設定します。 

<input type="range" value="10">

スライダーの後にラベルを表示する場合は label 要素と組み合わせます。 

<label><input type="range">音量</label>

スライダーの値の取得と設定

スライダーの値を取得するには input 要素を表す HTMLInputElement オブジェクトの value プロパティの値を参照します。書式は次のとおりです。 

element.value

例えば id 属性の値が myslider のスライダーで指定されている値を取得するには次のように記述します。 

let element = document.getElementById('myslider');
console.log(element.value);

また value プロパティに値を代入するとスライダーに値を設定することができます。 

let element = document.getElementById('myslider');
element.value = '50';
サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<p>サンプルページです。</p>

<div>
<label><input type="range" step="10" id="volumeSlider">音量</label>
</div>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function butotnClick(){
  console.log('ボリュームは ' + volumeSlider.value + ' です');
}

let volumeSlider = document.getElementById('volumeSlider');
volumeSlider.value = "30";

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

スライダーの初期値を value プロパティに値を代入して設定しています。スライダーを移動させたあとでボタンをクリックするとスライダーの値を value プロパティを使って取得しコンソールに出力します。

スライダーの値の取得と設定(1)

スライダーの値の取得と設定(2)

スライダーのイベント処理

スライダーでは input イベントと change イベントが発生します。スライダーを動かして間、値が変わる度に発生するのが input イベントです。それに対してスライダーを動かし終わったときにだけ発生するのが change イベントです。

change イベントを利用する場合は次のように記述します。 

<input type="range" id="myslider">

<script>
function inputChange(){
    // イベントが発生した時の処理
}

let element = document.getElementById('myslider');
element.addEventListener('change', inputChange);
</script>

change イベントの詳しい使い方については「changeイベント：フォームや選択メニューが変更されたとき」を参照されてください。

input イベントを利用する場合は次のように記述します。 

<input type="range" id="myslider">

<script>
function inputChange(){
    // イベントが発生した時の処理
}

let element = document.getElementById('myslider');
element.addEventListener('input', inputChange);
</script>

input イベントの詳しい使い方については「inputイベント：フォームで文字が入力されたとき」を参照されてください。

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<p>サンプルページです。</p>

<div>
<label><input type="range" step="10" id="volumeSlider">音量</label>
</div>

<p id="msg"></p>

<script>
function inputChange(event){
  msg.innerText = '音量は ' + volumeSlider.value + ' です';
}

let volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', inputChange);
let msg = document.getElementById('msg');
</script>

</body>
</html>

画面に表示されたスライダーを動かすと、スライダーの下に現在の値を表示します。

スライダーのイベント処理(1)

今回は input イベントの方を使用しているので、スライダーを動かしている間もイベントが発生します。

-- --

フォームで利用可能なスライダーを使って設定した値を JavaScript から取得したり設定したりする方法について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。