rangeslider.jsの特徴と使い方
どんな見た目?

特徴
- レスポンシブ対応
- 色は基本的に緑固定
- 操作できるバー(ハンドル)は1個のみ
使い方
公式サイトから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を使います
ここまで説明してきてなんですが、僕は使うのをやめました
使うのをやめた理由
見た目も悪くないし、すごく使いやすいんだけど個人的にスライドバーハンドルが1個しか設定できないのが致命的でした
例えば範囲指定のような場合、スライドバーを2個用意してそれぞれをグリグリ動かして範囲を設定したかったんですがそれが仕様上、不可能でした
なので別のレンジスライダーに変更することにしました
なお、スライドバーが1個だけという仕様は作者の公式コメントで確認済みです
ディスカッション
コメント一覧
まだ、コメントがありません