Webアプリで手軽に目盛りつきSliderを実装する(jRangeを使用)

今回はWebアプリにこのような目盛りつきスライダーを実装する方法を検証してみました。

条件としては、
- 目盛り(最小値が-180 最大値が180, メモリの値は15ずつ)があること
- スライダーがスムーズに動くこと
- 実装が楽なこと
- Firefox, Chromeで動くこと

の4つになります。

HTMLタグを使ってみる

スライダー自体は input type="range"と指定することで実装できるらしいです。

HTML5タグリファレンス

<div>
　　<input type="range" min="-180" max="180"> 
<div>

スライダーに目盛りを表示させる

input list="tlist"と指定し、目盛りを表示させたい数値にoptionを配置することで表示することができました。

<div>
　　<input type="range" min="-180" max="180" list="tlist">
　　　　<datalist id="tlist">
　　　　　　<option value="-150"></option>
　　　　　　<option value="-120"></option>
　　　　　　<option value="-90"></option>
　　　　　　<option value="-60"></option>
　　　　　　<option value="-30"></option>
　　　　　　<option value="0"></option>
          <option value="30"></option>
　　　　　　<option value="60"></option>
　　　　　　<option value="90"></option>
　　　　　　<option value="120"></option>
　　　　　　<option value="150"></option>
　　　　</datalist>
<div>

optionのところはもっといい書き方がありそうですが、今回は一旦これで。
こちらのサイトにも目盛りのところのコードが載っていました。

Chromeではこのように表示されます。

Firefoxだと対応してない様子・・・

ブラウザはChromeのみ、目盛りをつけるだけであればこのやり方で良さそうですね。

目盛りに数値をつけたい

先ほどのスライダーの目盛りがふってある位置に数値を表示させたい。
HTMLとCSSで頑張ればできそうですが、画面サイズが変わった時なども考慮して実装するのは結構大変そう。

jQuery UIとかでも実現できそうと思いましたが、いまいち手順を記しているサイトを見つけることができませんでした。

ライブラリを使ってスライダーを実装する

HTMLでゴリゴリ書く方法は諦めて使えそうなライブラリがないか検証した結果、
jRangeというライブラリが一番手軽に使えそうだったので採用しました。
その使い方をメモしておきたいと思います。

導入手順

jRange公式の方にも書いてありますが、英語なので、一応日本語でおさらい。
1. githubからコードをダウンロード。
2. jquery.range.js, jquery.range.cssの2つのファイルを自分のhtmlファイルの中に含める。
3. htmlファイルのライブラリ読み込みの箇所で以下のように書き、追加した2つのファイルを読み込む。

<link rel="stylesheet" href="jquery.range.css">
<script src="jquery.range.js"></script>

4.htmlにスライダーを配置したい場所に以下のように書く。

<input type="hidden" class="single-slider" value="0" />

あとは使いたいoptionをjQueryのファイルに書く、以上。
とっても簡単に使うことができました。optionの書き方は次で説明します。

スライダーの見た目を変更

jRange公式の"See it in Action"の箇所にも書いてあるように、jQueryでスライダーの設定をしておく必要があります。

このようなスライダーを表示するためには以下のコードを.jsファイルに書きます。

$('.single-slider').jRange({
  from: -180,
  to: 180,
  step: 15,
  scale: [-180,-150, -120, -90, -60, -30, 0, 30, 60, 90, 120, 150, 180],
  format: '%s',
  width: '100%',
  theme: "theme-blue",
  showLabels: false,
});

scale: 目盛りをふりたい位置をリストで指定
theme: "theme-blue"と"theme-green"を選ぶことが可能
showLabels: trueにすると現在値が表示される

スライダーを動かした際のイベントを取得したい場合は、
onstatechangeという関数をオプションとして指定しておき、
そのチェンジイベントの時の処理を書いておけばOKです。

$('.single-slider').jRange({
  from: -180,
  to: 180,
  step: 15,
  scale: [-180,-150, -120, -90, -60, -30, 0, 30, 60, 90, 120, 150, 180],
  format: '%s',
  width: '100%',
  theme: "theme-blue",
  showLabels: false,
  onstatechange: function(){
    $(".single-slider").trigger('change');
  }
});

$('.single-slider').change(function(e){
    console.log("スライダーが動かされました");
   });

その他

ここまで書いてこんなサイトを発見。
jQuery UIでも簡単に目盛り付きのものを実現できそうですね。

CSSで色々カスタマイズしないと見た目はシンプルなままそうですが。今度試してみたいと思います！