HTMLのinput rangeのスライダーで数値をjQueryでリアルタイムに取得する

HTMLで実装できる input range の値をリアルタイムに取得する方法です

jQueryを使ってHTMLのrangeの数値を取得する

まず、HTMLのinput rangeについて

input raneg 要素は最小値と最大値、そしてメモリの単位を決めて使うようなものでわざわざ数値を入れなくても、スライド操作だけで簡単に数値を選択出来る機能を持つものです。

どういった時に便利かというと、ある計算式の色々な結果を瞬時に知りたい時、一部の数値を変えるだけの計算の時に電卓であれば何度も打ち直さないといけないけど、スライドさせるだけでいろいろな結果を瞬時にする事が出来る。

例えば

198円のもの
250円のもの
78円のもの

など色々な価格のものがあって、3,000円の予算に収めたい時いちいち電卓使って打ち込んで計算してたら面倒ですよね

計算式が 198円×個数A+250円×個数B+78円×個数C なんて計算式にして、ABCのところをスライドで数値を変化させれるようにして、この計算式の結果をリアルタイムに表示できるようにし

3つのスライドを動かして和が3,000円に近くなるような組み合わせを探せるようにすれば、直感的な操作で計算が出来てしまうなど。

本題のjQueryを使って input range の値をリアルタイムに取得する方法

サンプル

DEMO 表示

Code

CSSなどは省いて必要な部分だけ取り出しています、コードの全体はサンプルのHTMLの中を覗いてみてください。

<script>
$(window).on("load",function(){

 //inputの変化を検知
 $("input[type=range]").on("input",function(){
  
  /*操作中のinput rangeの数値をそのinput rangeのdata-numberに保存*/
  var val = $(this).val();
  $(this).attr("data-number",val);
  
  /*
  計算式

  input要素にキャッシュしたdata-numberの値を取得して計算したものを H2に出力
  attrで取得した数値を数字として扱うために parseInt を使って数値化
  */
  $(".float-answer h2").text(
   parseInt($(".input-1").attr("data-number"))
   +parseInt($(".input-2").attr("data-number"))
   +parseInt($(".input-3").attr("data-number"))
  );
 });
});
</script>

<div class="input-range">
 <input 
        class="input-range-width input-range input-1"
        type="range"
        max="100"
        min="0"
        step="1"
        value="0"
        data-number="0"
        >
 <input 
        class="input-range-width input-range input-2"
        type="range"
        max="100"
        min="0"
        step="1"
        value="0"
        data-number="0"
        >
 <input 
        class="input-range-width input-range input-3"
        type="range"
        max="100"
        min="0"
        step="1"
        value="0"
        data-number="0"
        >
</div>

input要素にリアルタイムに値を保存してそれを、計算し直す形です。forを使ってinput rangeの数が動的であるようなページでも対応できるような書き方も可能。

あとは現在値をスライドの横辺りに表示したり、操作中のスライドの値を吹き出しで可視化してやったり、またスライド自体をCSSで装飾してやったりするとユーザービリティが上がるかと思います。

さらなる応用としては、今回は計算って形でやっていますが

1=カテゴリA

2=カテゴリB

などちいった使い方で、計算以外にも絞り込み機能とかにも応用出来るかと思います。

不動産サイトとかショッピングサイトとかでajaxと組み合わせてリアルタイムに検索結果を表示させるなどと行った使い方とかも有りなんじゃないかと思います。