rangeslider.jsの特徴と使い方

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

どんな見た目?

特徴

  • レスポンシブ対応
  • 色は基本的に緑固定
  • 操作できるバー(ハンドル)は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個だけという仕様は作者の公式コメントで確認済みです

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら