rSlider.jsの特徴と使いかた

2020年6月11日ツール関連

どんな見た目?

特徴

  • レスポンシブ対応
  • 操作できるスライドバーは1個もしくは2個
  • ツールチップの表示ができる

使い方

githubページからファイルをダウンロード

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

html

<input type="text" id="slider" class="slider">

レンジスライダーを表示したい場所に上記を設置

js

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

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

var mySlider = new rSlider({
    target: '#slider',
    values: [2008, 2009, 2010, 2011, ...],
    range: true // range slider
    set:    null, // an array of preselected values
    width:    null,
    scale:    true,
    labels:   true,
    tooltip:  true,
    step:     null, // step size
    disabled: false, // is disabled?
    onChange: null // callback
});

インスタンスの生成

各種オプションなどを設定

オプション

target:対象のスライダーidを指定

values:スライダーの範囲を数値で指定する。[1,2,3,4]のような指定方法だけでなく{min: 1, max: 4}のような一括指定もできる

step:数値の刻み(スライドバー1個分の移動量)

range:スライドバーを1個だけ使う時はfalse、2個使う時はtrue

set:スライドバーの初期値(スライドバー1個だけの時は1つ、2個の時は2つ指定する)

labels:数値の値ラベルを表示するかどうか

tooltip:ツールチップ(ポップアップ)を表示するかどうか

コールバック

動かしたスライドバーの値を取得する時は生成したインスタンスに対して以下の様にコールバックを設定するとのこと

mySlider.onChange(function (values) { 
// argument values represents current values 
});

ただし、結果から言うとこのコードでは値を取得できません

インスタンス時にonchangeメソッドを指定する必要があります

var mySlider = new rSlider({
    target: '#slider',
    values: [2008, 2009, 2010, 2011, ...],
    range: true // range slider
    set:    null, // an array of preselected values
    width:    null,
    scale:    true,
    labels:   true,
    tooltip:  true,
    step:     null, // step size
    disabled: false, // is disabled?
    onChange: function (vals) {
        // コールバックを取得
    }
});

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

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

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

詳しくはこちら