jQueryのUIのAPI - スライダコンポーネント（スライダーウィジェット）
カテゴリ
使用法
説明：値を選択するためにハンドルをドラッグします。
新バージョン：1.5
jQueryのUIのスライダー（スライダー）プラグインは、スライダを介して選択することを可能にします。 このような複数のハンドルや範囲などのさまざまなオプションがあります。 ハンドルは、マウスまたは矢印キーを使用して移動させることができます。
スライダーコンポーネント（スライダウィジェット）は、初期化時にクラスを使用して作成されui-slider-handleハンドル要素。 あなたは要素を追加しているときに、初期化の前に要素を作成して追加することができますui-slider-handleカスタムハンドル要素を指定するには、クラスを。 それが唯一のマッチング作成するvalue / valuesハンドル数の所望の長さを。 あなたが指定した場合たとえば、 values: [ 1, 5, 18 ]およびカスタムハンドルを作成し、プラグインは、他の2つを作成します。
テーマ
スライダーコンポーネント（スライダーウィジェット）を使用してjQueryのUI CSSフレームワークを 、そのスタイルのルックアンドフィールを定義します。 あなたがスタイルを指定するには、スライダを使用する必要がある場合は、以下のCSSクラス名を使用することができます。
-
ui-slider：Sliderコントロールトラック。 この要素は、スライダに基づくことになるorientationでさらにui-slider-horizontalまたはui-slider-verticalクラス、。-
ui-slider-handle：スライダーハンドル。 -
ui-slider-range設定する場合：rangeオプションで選択した範囲を使用するとき。 場合はrangeオプションに設定されている"min"または"max"の追加要素で、それぞれui-slider-range-minまたはui-slider-range-max、クラス。
-
頼ります
追加情報
- 一部は、いくつかの機能のCSSを必要とし、それ以外の場合は動作しません。 カスタムテーマを作成する場合は、出発点として、ウィジェット指定されたCSSファイルを使用します。
例
シンプルなjQueryのUIのスライダー（スライダー）。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>スライダー部材（スライダーウィジェット）デモ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<スタイル> #slider {マージン：10pxの;} </ style>の
<SCRIPT SRC = "// code.jquery.com/jquery-1.10.2.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "スライダー"> </ div>の
<スクリプト>
$（ "#slider」）.slider（）;
</スクリプト>
</ BODY>
</ HTML>