サイト制作に関するメモ書き

HOME > JavaScript > jQuery > jQuery UI のSliderを使ってみる

jQuery UI のSliderを使ってみる

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();
});

基本的な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のデモページ

詳細は公式のドキュメントをご確認ください。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP