inputのtype=rangeのようなUIを実装できるjQuery UIのSliderを使ってみます。
基本的な使い方
必要なファイルをCDNから読み込みます。
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
body内にSliderで使用する要素を追加します。
HTML
<div class="slider-wrapper"> <div id="slider"></div> </div>
.slider-wrapperは幅を調整するために追加していますが、Sliderの実装のみなら#sliderのみで大丈夫です。
.slider-wrapperに幅の設定を追加します。
CSS
.slider-wrapper {
width: 400px;
}
特にオプションを設定しない場合、JavaScriptで以下のように記述します。
JavaScript
$(function() {
$('#slider').slider();
});
Options
| animate | スライダーをクリックやキーボードで動かしたときにアニメーションさせるかどうか。 値は真偽値か数値、文字列でfastかslow(アニメーション速度)を指定で、初期値はfalse。 animateのデモページ |
|---|---|
| classes | スライダーの要素に追加するclassを指定。 値はオブジェクト形式での指定で、初期値は下記。 { “ui-slider”: “ui-corner-all”, “ui-slider-handle”: “ui-corner-all”, “ui-slider-range”: “ui-corner-all ui-widget-header” } classesのデモページ |
| disabled | スライダーを非活性にするかどうか。 値は真偽値で指定で、初期値はfalse。 disabledのデモページ |
| max | スライダーの値の最大値を指定。 値は数値で指定で、初期値は100。 maxのデモページ |
| min | スライダーの最小値の値を指定。 値は数値で指定で、初期値は0。 minのデモページ |
| orientation | スライダーの向きを指定。 値はhorizontalかverticalで、初期値はhorizontal。 orientationのデモページ |
| range | 範囲形式のスライダーにする。 初期値はfalseで、値がtrueの場合は2つのハンドルで最小値と最大値を設定できる。 minの場合は最小値固定で最大値のみの設定、maxの場合は最大値固定で最小値のみの設定ができるようになる。 range(true)のデモページ range(min)のデモページ range(max)のデモページ |
| step | スライダーの最小値と最大値の間のステップ数を指定。 値は数値で指定で、初期値は1。 stepのデモページ |
| value | ハンドルが1つの場合のスライダーの値(初期値)を指定。 値は数値で指定で、初期値は0。 valueのデモページ |
| values | 複数のハンドルの値を指定。 値は配列形式で指定で、初期値はnull。 valuesのデモページ |
Methods
| destroy | スライダーを破棄する。 destroyのデモページ |
|---|---|
| disable | スライダーを非活性状態にする。 disable・enableのデモページ |
| enable | スライダーを活性状態にする。 disable・enableのデモページ |
| instance | スライダーのインスタンスオブジェクトを取得。 instanceのデモページ |
| option | スライダーに設定しているオプションの値の取得や変更をする。 optionのデモページ |
| value | スライダーの値の取得や変更をする。 valueのデモページ |
| values | ハンドルが複数の場合の値の取得や変更をする。 valuesのデモページ |
| widget | スライダーを含むjQueryオブジェクトを取得。 widgetのデモページ |
Events
| change | 値が変更された場合に発火。 changeのデモページ |
|---|---|
| create | スライダーが構築された後に発火。 createのデモページ |
| slide | ハンドルを動かしている時に発火。 slideのデモページ |
| start | スライド開始時に発火。 startのデモページ |
| stop | スライド完了後に発火。 stopのデモページ |
詳細は公式のドキュメントをご確認ください。
【参考サイト】
コメントが承認されるまで時間がかかります。