Slider 1.5 追加

ドラッグして値を選択するスライドバー機能を提供します。

jQuery UI Sliderプラグインはスライダーによって選択可能な要素を作成します。  多様なオプションによって様々な操作や範囲の指定が可能です。 マウスまたは矢印キーの操作でスライダーを動かします。 スライダーウィジットは初期化時に、class名"ui-slider-handle"のつまみ要素を生成します。

つまみ要素をカスタマイズすることが可能です。 初期化前につまみにする要素を生成、挿入し、classに"ui-slider-handle"を追加してください。

例えばもし、values: [ 1, 5, 18 ]を指定して、1つのカスタムつまみを作成した場合、 プラグインは別にもう2つのつまみを生成します。

スライダーはいくつかの機能的なCSSを必要とします。 このCSSが読み込めないと機能しないため、最初に必要とするCSSを読み込むようにしてください。

依存関係

オプション 説明
animate

型:Boolean or String or Number
初期値:false

スライダーのトラックをクリックした際につまみがどれぐらいスムーズに移動させるかを指定します。 アニメーションを指定することも可能です。

Boolean
trueを指定するとdurationの初期値が適用されます。
String
"fast"、"slow"など速度名を指定します。
Number
durationをミリ秒単位で指定します。
$( ".selector" ).slider({ animate: "fast" });
// getter
var animate = $( ".selector" ).slider( "option", "animate" );

// setter
$( ".selector" ).slider( "option", "animate", "fast" );
disabled

型:Boolean
初期値:false

trueを指定すると、スライダーを無効化します。

max

型:Number
初期値:0

スライダーの最大値を設定します。

min

型:Number
初期値:0

スライダーの最小値を設定します。

orientation

型:String
初期値:"horizontal"

スライダーを横向き(最小が左、最大が右)にするか、縦向き(最小が下、最大が上)にするかを指定します。 指定可能な値は、"horizontal", "vertical"です。

range

型:Boolean or String
初期値:false

Boolean
trueを指定すると、スライダーのつまみが2つになり、この2つのつまみによって範囲は検出されるようになります。
String
"min"または"max"を指定します。 "min"を指定すると最小値からのスライドになり、"max"を指定すると最大値からのスライドになります。

スライダーの表示範囲を指定します。

step

型:Number
初期値:0

最小から最大までの1ステップの間隔を指定します。 1ステップの値は、スライダーの全体値を割った際に割り切れる値でなければいけません。

value

型:Number
初期値:0

スライダーの値を指定します。 もし、スライダーのつまみが複数設定されている場合は、1つ目の値の指定になります。

values

型:Array
初期値:null

つまみが複数あるスライダーの値を指定します。 もし、rangeオプションにtrueが指定されていれば、長さ2の配列を指定する必要があります。

メソッド説明
destroy()

スライダーの機能を完全に削除します。

$( ".selector" ).tabs( "destroy" );
disable()

スライダーを無効化します。

enable()

スライダーを有効にします。

option( optionName )

戻り値:Object

optionNameに指定したオプションの現在の値を取得します。

optionName
型:String
取得したいオプションの名前を指定します。
option()

戻り値:PlainObject

オプションの各キーと値がペアとなったオブジェクトを返します。

option( optionName, value )

引数のoptionNameのオプションに値を設定します。

optionName
型:String
設定したいオプションの名前を指定します。
value
型:Object
設定したい値を指定します。
option( options )

オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。

option
型:Object
設定したいオプションのキーと名前のペアを指定します。
value()

戻り値:Number
スライダーの値を取得します。

value( value )
value
型:Number
設定したい値を指定します。

スライダーに値を設定します。

values(index)

戻り値:Number
スライダーの値を取得します。

values( index )
index
型:Number
値取得の対象のつまみを、0始まりのインデックスで指定します。

指定したつまみの値を取得します。

values( index, value )
index
型:Number
値を設定したいつまみを、0始まりのインデックスで指定します。
value
型:Number
設定したい値を指定します。

指定したつまみに値を設定します。

values( values )
values
型:Array
各つまみに設定したい値を配列で指定します。

全てのつまみに対して値を一括で設定します。

widget()

戻り値:Object

スライダーを含めたjQueryオブジェクトを返します。

イベント 説明
change( event, ui )

型:slidechange

ユーザーによるスライダーの操作や、valueなどを使用したプログラミング処理で 値が変更された後にトリガされます。

ui.handle
型:jQuery
変更されたつまみのjQueryオブジェクトです。
ui.value
スライダーの現在の値です。
create( event, ui )

型:menucreate

スライダーが生成された際にトリガされます。

slide( event, ui )

型:slide

マウスでスライダ上でつまみを移動する度にトリガされます。 ui.valueなどの値がスライダを移動した結果の値として提供されます。 イベントをキャンセルすることで、つまみの移動と値の変更もキャンセルすることが出来ます。

ui.handle
型:jQuery
移動したつまみのjQueryオブエジェクトを取得します。
ui.value
型:Number
イベントがキャンセルされなければ、移動したつまみの値を取得します。
ui.values
複数つまみがある場合、移動したつまみの値を配列で取得します。
start( event, ui )

型:slidestart

ユーザーがスライダの移動を始める際にトリガされます。

ui.handle
型:jQuery
スライドを開始するつまみのjQueryオブジェクトです。
ui.value
型:Number
現在のスライダーの値を取得します。
stop( event, ui )

型:slidestop

ユーザーがスライダの移動を止める際にトリガされます。

ui.handle
型:jQuery
スライドを終了するつまみのjQueryオブジェクトです。
ui.value
型:Number
現在のスライダーの値を取得します。

 Back to top

© 2010 - 2017 STUDIO KINGDOM