【jQuery】スライダーフォームの入力時にvalue値を動的に取得する方法

2019-04-08jQuery

スライダーフォームの入力時にvalue値を動的に取得する方法

jQueryでスライダーフォームの入力時にvalue値を動的に取得する方法です

on(‘change’)でvalue値を動的に取得して値を表示する方法

See the Pen クリック要素の直近の子要素のid・classを取得する by yochans (@yochans) on CodePen.

on(‘change’)は値が変更されたのをトリガーするイベントリスナーです

イベント発火時にfunction関数内の処理を実行します

スライダーフォームの値はval()で取得可能

HTML

<input type="range" class="slider" value="0" min="0" max="100" step="1">
<p class="value">0</p>

jQuery

$('.slider').on('change', function() {
 let val = $(this).val();
  $('.value').html(val);
});

on(‘input’)でvalue値を動的に取得して値を表示する方法

See the Pen get Slider form value 2 (jQuery) by yochans (@yochans) on CodePen.

on(‘input’)ではスライダーが操作されている状態でイベント発火が可能です

イベント発火時にfunction関数内の処理を実行します

値を表示するコンテンツの場合はより動的感が出るのはon(‘input’)になりますが、動的に変更された値を取得して処理をするだけなら概ね不要です

HTML

<input type="range" class="slider" value="0" min="0" max="100" step="1">
<p class="value">0</p>

jQuery

$('.slider').on('input', function() {
 let val = $(this).val();
  $('.value').html(val);
});

2019-04-08jQueryフォーム

Posted by Yousuke.U