jQuery | スライダーフォームの入力時に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);
});