2015/02/17

スマホ対応のスライダー数値入力UI『rangeslider.js』の紹介

スマホ対応のスライダー数値入力UI『rangeslider.js』の紹介

入力フォームにおいて,スライダータイプの数値入力フォームが,スマートフォンやタブレット端末等のタッチパネルタイプの端末にも対応できるjQueryプラグイン『rangeslider.js』を紹介します.

目次

入手方法

http://andreruffert.github.io/rangeslider.js/にアクセスし,ページ上部にあるDownload v1.0.0をクリックし,ファイルをダウンロードします.

ダウンロードしたファイルを解凍し,中にあるJavaScriptファイルとCSSファイルを,jQuery本体とともに読み込みます.

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

以下のURLからCDNを利用することも出来ます.

<link rel="stylesheet" href="//cdn.jsdelivr.net/rangeslider.js/1.0.0/rangeslider.css">
<script src="cdn.jsdelivr.net/rangeslider.js/1.0.0/rangeslider.min.js"></script>

設置方法

例として,以下の様なフォーム要素を作成します.

<input type="range" min="10" max="1000" step="10" value="300">
<!-- 最小値:10 最大値:1000 変化量:10刻み スライダー初期位置:300-->

これに対して,JavaScriptを記述して初期化します.

//type="range"要素に対して適応
$('input[type="range"]').rangeslider();

//破棄する場合は以下
$('input[type="range"]').rangeslider('destroy');

オプションを指定する場合は以下のようになります.

$('input[type="range"]').rangeslider({
    // polyfillの設定
    polyfill: true,

    // CSS用クラス
    rangeClass: 'rangeslider',
    fillClass: 'rangeslider__fill',
    handleClass: 'rangeslider__handle',

    // 初期化時のコールバック関数
    onInit: function() {},

    // スライド時のコールバック関数
    onSlide: function(position, value) {},

    // スライド終了時のコールバック関数
    onSlideEnd: function(position, value) {}
});

サンプル

ファイルをダウンロードしたページhttp://andreruffert.github.io/rangeslider.js/にサンプルがあります.

まとめ

レスポンシブ対応なので,ウインドウのリサイズによるサイズ変更にも対応しています.スライダータイプを利用して数値の変更を行う場合はぜひ使用してみてください.