rangeslider.jsの特徴と使い方

2020年1月30日2020年6月11日ウェブサービス

どんな見た目？

特徴

• レスポンシブ対応
• 色は基本的に緑固定
• 操作できるバー（ハンドル）は１個のみ

使い方

公式サイトからzipファイルをダウンロード

解凍して見つかるファイル（css、js）をアップロード

html

<input
    type="range"
    min="10"                    // default 0
    max="1000"                  // default 100
    step="10"                   // default 1
    value="300"                 // default min + (max-min)/2
    data-orientation="vertical" // default horizontal
>

上記のコードがレンジスライダー本体

js

<script src="jquery.min.js"></script>
<script src="rangeslider.min.js"></script>

アップロードしたrangeslider.jsのファイルを読み込む

<script>
    $('input[type="range"]').rangeslider({polyfill: false});
</script>

初期化処理。polyfillをfalseにするとカラフルなスライドバーに

$('input[type="range"]').rangeslider({
    polyfill: true,
    // Callback function
    onSlide: function(position, value) {},
});

オプションとしてonslide:を追加すると、スライドバーが移動するたびにコールバックでパラメーターを取得できます

positionはバーの位置座標、valueは設定した数値。基本的にはvalueを使います

ここまで説明してきてなんですが、僕は使うのをやめました

使うのをやめた理由

見た目も悪くないし、すごく使いやすいんだけど個人的にスライドバーハンドルが１個しか設定できないのが致命的でした

例えば範囲指定のような場合、スライドバーを２個用意してそれぞれをグリグリ動かして範囲を設定したかったんですがそれが仕様上、不可能でした

なので別のレンジスライダーに変更することにしました

なお、スライドバーが１個だけという仕様は作者の公式コメントで確認済みです