jQueryのUIの例 - スライダー（スライダー）
値を選択するためにハンドルをドラッグします。
スライダ部材の詳細については、APIドキュメントを参照してくださいスライダー部材（スライダーウィジェット） 。
デフォルトの機能
基本的なスライダが水平であり、単一のハンドルを持って、マウスや矢印キーで移動することができます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIスライダー（スライダー） - デフォルトの機能</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#slider」）.slider（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "スライダー"> </ div>の
</ BODY>
</ HTML>
カラーピッカー
単純なRGBカラーピッカーを作成するための3つのスライダーの組み合わせ。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIスライダー（スライダー） - カラーピッカー</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#red、#green、#blue {
フロート：左;
クリア：左;
幅：300ピクセル;
マージン：15ピクセル;
}
#swatch {
幅：120ピクセル;
高さ：100pxに。
マージントップ：18px;
margin-left：350px;
背景画像：なし。
}
#red .ui-スライダレンジ{背景：＃1 ef2929;}
#red .ui-スライダーハンドル{ボーダーカラー：＃のef2929;}
#green .ui-スライダレンジ{背景：＃8ae234;}
#green .ui-スライダーハンドル{ボーダーカラー：＃8ae234;}
#blue .ui-スライダレンジ{背景：＃729fcf;}
#blue .ui-スライダーハンドル{ボーダーカラー：＃729fcf;}
</スタイル>
<スクリプト>
機能hexFromRGB（R、G、B）{
VAR六角= [
r.toString（16）、
g.toString（16）、
b.toString（16）
];
の$ .each（16進数、関数（NR、val）で{
場合（val.lengthの=== 1）{
ヘクス[NR] = "0" +ヴァル。
}
}）;
戻りhex.join（ ""）.toUpperCase（）;
}
関数refreshSwatch（）{
VAR赤= $（ "#red」）.slider（"値 "）、
緑= $（ "#green」）.slider（"値 "）、
青= $（ "#blue」）.slider（"値 "）、
六角= hexFromRGB（赤、緑、青）。
$（ "#swatch」）の.css（「背景色」、「＃」+ 16進数）。
}
$（関数（）{
{（$（ "#red、#green、#blue」）.slider
オリエンテーション：「水平」、
範囲：「分」、
最大：255、
値：127、
スライド：refreshSwatch、
変更：refreshSwatch
}）;
$（ "#red」）.slider（"値 "、255）;
$（ "#green」）.slider（"値 "、140）;
$（ "#blue」）.slider（"値 "、60）;
}）;
</スクリプト>
</ HEAD>
<ボディクラス= "UI-ウィジェットコンテンツ"スタイル= "国境：0;">
<Pクラス= "UIステートのデフォルトUI-コーナー - すべてのUIヘルパー-clearfix"スタイル= "パディング：4PX;">
<スパンクラス= "UI-アイコンUI-アイコン鉛筆"スタイル= "フロート：左;マージン：-2px 5pxの0 0;"> </ span>の
シンプルなカラーピッカー</ P>
<DIVのID = "赤"> </ div>の
<DIVのID = "緑"> </ div>の
<DIVのID = "青"> </ div>の
<DIVのID = "見本"クラス= "UIウィジェットコンテンツUI-コーナー-すべて"> </ div>の
</ BODY>
</ HTML>
スライダーの複数
水平および垂直スライダ、独自のオプションでそれぞれの組み合わせは、音楽プレーヤーのUIを作成します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIスライダー（スライダー） - スライダー</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#eqスパン{
高さ：120ピクセル;フロート：左;マージン：15ピクセル
}
</スタイル>
<スクリプト>
$（関数（）{
{（マスターボリューム$（ "#master」）.sliderを設定します//
値：60、
オリエンテーション：「水平」、
範囲：「分」、
アニメーション：真
}）;
//グラフィックイコライザー$（ "#eq>スパン」）.each（関数（）{設定
//は、タグからの初期値を読み込み、その値のvar値= parseIntは（$（この）は.text（）、10）を除去します。
$（この）.empty（）。スライダー（{
値：値、
範囲：「分」、
アニメーション：trueの場合、
オリエンテーション：「垂直」
}）;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<Pクラス= "UIステートのデフォルトUI-コーナー - すべてのUIヘルパー-clearfix"スタイル= "パディング：4PX;">
<スパンクラス= "UI-アイコンUI-アイコン・ボリューム・オン」スタイル="フロート：左;マージン：-2px 5pxの0 0; "> </ SPAN>
マスターボリューム</ P>
<DIV ID = "マスター"スタイル= "幅：260px;マージン：15ピクセル;"> </ div>の
<Pクラス= "UIステートのデフォルトUI-コーナーすべて"スタイル= "パディング：4PX;マージントップ：4em;">
<スパンクラス= "UI-アイコンUI-アイコン-信号"スタイル= "フロート：左;マージン：-2px 5pxの0 0;"> </ SPAN>
グラフィックイコライザます。</ p>
<DIVのID = "EQ">
<スパン> 88 </ span>の
<スパン> 77 </ span>の
<スパン> 55 </ span>の
<スパン> 33 </ span>の
<スパン> 40 </ span>の
<スパン> 45 </ span>の
<スパン> 70 </ span>の
</ DIV>
</ BODY>
</ HTML>
レンジスライダ
設定rangeオプションは2ドラッグハンドルと値の範囲を得ることが、本当です。 異なる背景色でコントロールハンドルの間の間隔の値は任意であることを示すために記入してください。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIスライダー（スライダー） - 範囲スライダ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
{（$（ "＃スライダレンジ」）.slider
範囲：trueの場合、
最小：0、
最大：500、
値：[75、300]、
スライド：機能（イベント、UI）{
$（ "#amount」）.val（" $ "+ Ui.values [0] +" - $ "+ ui.values [1]）;
}
}）;
$（ "#amount」）.val（" $ "+ $（"＃スライダレンジ」）.slider（ "値"、0）+
" - $" + $（ "＃スライダレンジ」）.slider（"値 "、1））;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>
</ label>は：価格帯<= "量"のラベル>
<input type = "text"のid = "量"スタイル= "国境：0;色：＃1 f6931f;フォント重量：太字;">
</ P>
<DIVのID = "スライダーレンジ"> </ div>の
</ BODY>
</ HTML>
固定最大範囲
スライダーの最大範囲を固定し、ユーザーが最小値を選択することができます。 設定range 「最大」にオプションを選択します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIスライダー（スライダー） - 一定の最大値を有する範囲</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "＃スライダレンジ-MAX」）.slider（{
範囲：「最大」、
分：1、
最大：10、
値：2、
スライド：機能（イベント、UI）{
$（ "#amount」）.val（Ui.value）。
}
}）;
$（ "#amount」）.val（$（"＃スライダレンジ-MAX」）.slider（ "値"））;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>
部屋の<= "量"のラベル>最小数：</ label>は
<input type = "text"のid = "量"スタイル= "国境：0;色：＃1 f6931f;フォント重量：太字;">
</ P>
<DIVのID = "スライダーレンジ-MAX"> </ div>の
</ BODY>
</ HTML>
固定最小と範囲
最小固定範囲スライダは、ユーザーが最大値を選択することができます。 設定rangeオプション"分"。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIスライダー（スライダー） - 一定の最小と範囲</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "＃スライダレンジ分」）.slider（{
範囲：「分」、
値：37、
分：1、
最大：700、
スライド：機能（イベント、UI）{
$（ "#amount」）.val（" $ "+ Ui.value）。
}
}）;
$（ "#amount」）.val（" $ "+ $（"＃スライダレンジ分」）.slider（ "値"））;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>
<= "量"のラベル>最高価格：</ label>は
<input type = "text"のid = "量"スタイル= "国境：0;色：＃1 f6931f;フォント重量：太字;">
</ P>
<DIVのID = "スライダーレンジ分"> </ div>の
</ BODY>
</ HTML>
スライダーを選択するためにバインドされました
既存の要素を選択するには、スライダをバインドする方法。 選択して変更内容を表示するために表示されたまま。 選択が変化すると、スライダーを更新します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIスライダー（スライダー） - スライダーを選択するためにバインドされている</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
varが= $（ "#minbeds」）を選択します。
VARスライダー= $（ "<div要素のid = 'スライダー'> </ DIV>"）.insertAfter（選択）.slider（{
分：1、
最大：6、
範囲：「分」、
値：[0] .selectedIndex + 1を選択し、
スライド：機能（イベント、UI）{
選択[0] .selectedIndex = ui.value - 1;
}
}）;
$（ "#minbeds」）.change（関数（）{
slider.slider（「値」、this.selectedIndex + 1）;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<フォームID = "予約">
ベッドの最小数<= "minbeds"のラベル> </ label>は
<選択名= "minbeds" ID = "minbeds">
<オプション> 1 </オプション>
<オプション> 2 </オプション>
<オプション> 3 </オプション>
<オプション> 4 </オプション>
<オプション> 5 </オプション>
<オプション> 6 </オプション>
</選択>
</フォーム>
</ BODY>
</ HTML>
スクロールバースライダー
ページのコンテンツを見つける操作するスライダを使用します。 この例では、スクロールバーの値を取得することができます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIスライダー（スライダー） - スクロールバーをスライド</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.scrollペイン{オーバーフロー：自動;幅：99％;フロート：左;}
.scroll-コンテンツ{幅：2440px;フロート：左;}
.scroll-コンテンツ・アイテム{幅：100ピクセル、高さ100ピクセル;フロート：左;マージン：10pxの;フォントサイズ：3em;行の高さ：96px;テキスト整列：センター;}
.scrollバーラップ{明確には：左;パディング：0 4PX 0 2ピクセル;マージン：0 -1px -1px -1px;}
.scrollバーラップ.ui-スライダー{背景：なし;国境：0;高さ：2EM;マージン：0自動;}
.scrollバーラップ.ui-ハンドルヘルパー親{位置：相対;幅：100％;高さ：100％;マージン：0自動;}
.scrollバーラップ.ui-スライダーハンドル{トップ：.2em;高さ：1.5em;}
.scrollバーラップ.ui-スライダーハンドル.ui-アイコン{マージン：-8pxオート0;位置：相対;トップ：50％;}
</スタイル>
<スクリプト>
$（関数（）{
//スクロールパネル部のVARスクロール区画= $（ ".scroll-ペイン」）、
scrollContent = $（ ".scroll-コンテンツ"）;
// {（スライダーのvarスクロールバー= $（ ".scrollバー」）.sliderを作成します。
スライド：機能（イベント、UI）{
場合（scrollContent.width（）> scrollPane.width（））{
scrollContent.css（「余白左」、恐らくMath.round（
ui.value / 100 *（scrollPane.width（） - scrollContent.width（））
）+ "Pxを"）;
}エルス{
scrollContent.css（「のmargin-left "、0）;
}
}
}）;
//（「.ui-スライダーハンドル」）VAR handleHelper = scrollbar.findを処理するためにアイコンを追加
.mousedown（関数（）{
scrollbar.width（handleHelper.width（））;
}）
.mouseup（関数（）{
scrollbar.width（「100％」）。
}）
.append（ "<スパンクラス= 'UIアイコンUI-アイコングリップ-点在-垂直'> </ span>の"）
.wrap（ "の<divクラス= 'UI-ハンドルヘルパー親'> </ DIV>"）.parent（）;
//スライダーハンドルスクロールするので、オーバーフロー部分scrollPane.css（ "オーバーフロー"、 "隠された"）を非表示に変更します。
//スクロール距離は、スクロールバーのサイズとハンドル機能sizeScrollbarの比によって定義されるに従って（）{
するvar余り= scrollContent.width（） - scrollPane.width（）;
VARの割合=余り/ scrollContent.width（）;
VAR handleSize = scrollPane.width（） - （割合* scrollPane.width（））;
scrollbar.find（「.ui-スライダーハンドル」）の.css（{
幅：handleSize、
「マージン左 "：-handleSize / 2
}）;
handleHelper.width（ ""）.width（scrollbar.width（） - handleSize）。
}
//コンテンツベースのスクロール位置、スライダー機能resetValue（の値をリセット）{
するvar余り= scrollPane.width（） - scrollContent.width（）;
VAR leftVal = scrollContent.css（ "のmargin-left"）=== "オート" 0？：
parseIntは（scrollContent.css（「マージン左 "））;
VARの割合=恐らくMath.round（leftVal /余り* 100）;
scrollbar.slider（「値」、パーセンテージ）。
}
//スライダーが100％であり、窓が増加した場合、表示機能reflowContent（）{
するvar示す= scrollContent.width（）+ parseIntは（scrollContent.css（「マージン左 "）、10）;
VARギャップ= scrollPane.width（） - を示します。
場合（ギャップ> 0）{
scrollContent.css（）、parseIntは（scrollContent.css（「マージン左」「左マージン」、10）+ギャップ）。
}
}
//ハンドルの変更時にズームウィンドウ位置$（ウィンドウ）.resize（関数（）{
resetValue（）。
sizeScrollbar（）。
reflowContent（）。
}）;
//スクロールバーのサイズのsetTimeout（sizeScrollbar、10）の初期化; //サファリタイムアウト}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "スクロール・ペインのUIウィジェットのUIウィジェットヘッダUI-コーナー-すべて">
<DIVクラス= "スクロールコンテンツを">
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 1 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 2 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 3 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 4 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 5 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 6 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 7 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 8 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 9 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 10 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 11 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 12 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 13 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 14 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 15 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 16 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 17 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 18 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 19 </ DIV>
<DIVクラス= "スクロール・コンテンツ・アイテムのUIウィジェットヘッダを"> 20 </ DIV>
</ DIV>
<DIVクラス= "スクロールバーラップUIウィジェットコンテンツUI-コーナーボトム">
<DIVクラス= "スクロールバー"> </ div>の
</ DIV>
</ DIV>
</ BODY>
</ HTML>
増分を合わせます
stepオプションはインクリメント値を設定するには、整数のスライダーに設定されている通常の最大除数スライダーです。 デフォルトの増分は1です。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIスライダー（スライダー） - 整列インクリメンタル</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
（{$（ "#slider」）.slider
値：100、
最小：0、
最大：500、
ステップ：50、
スライド：機能（イベント、UI）{
$（ "#amount」）.val（" $ "+ Ui.value）。
}
}）;
$（ "#amount」）.val（" $ "+ $（" #slider」）.slider（ "値"））;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>
<= "量"のラベル>寄付額（$ 50刻み）：</ label>は
<input type = "text"のid = "量"スタイル= "国境：0;色：＃1 f6931f;フォント重量：太字;">
</ P>
<DIVのID = "スライダー"> </ div>の
</ BODY>
</ HTML>
垂直範囲スライダ
スライダーに垂直な方向の範囲を変更します。 .height()高さの値を割り当て、またはCSSで高さを設定し、設定orientation 「垂直」のオプション。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIスライダー（スライダー） - 垂直方向の範囲スライダ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
{（$（ "＃スライダレンジ」）.slider
オリエンテーション：「垂直」、
範囲：trueの場合、
値：[17、67]、
スライド：機能（イベント、UI）{
$（ "#amount」）.val（" $ "+ Ui.values [0] +" - $ "+ ui.values [1]）;
}
}）;
$（ "#amount」）.val（" $ "+ $（"＃スライダレンジ」）.slider（ "値"、0）+
" - $" + $（ "＃スライダレンジ」）.slider（"値 "、1））;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>
（単位：百万ドル）販売目標<= "量"のラベル>：</ label>は
<input type = "text"のid = "量"スタイル= "国境：0;色：＃1 f6931f;フォント重量：太字;">
</ P>
<DIVのID = "スライダーレンジ"スタイル= "高さ：250ピクセル;"> </ div>の
</ BODY>
</ HTML>
縦のスライダー
垂直スライダーの方向を変更します。 .height()高さの値を割り当て、またはCSSで高さを設定し、設定orientation 「垂直」のオプション。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIスライダー（スライダー） - 垂直スライダー</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "＃スライダー-垂直」）.slider（{
オリエンテーション：「垂直」、
範囲：「分」、
最小：0、
最大：100、
値：60、
スライド：機能（イベント、UI）{
$（ "#amount」）.val（Ui.value）。
}
}）;
$（ "#amount」）.val（$（"＃スライダー-垂直」）.slider（ "値"））;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>
ボリューム<= "量"のラベル>：</ラベルは>
<input type = "text"のid = "量"スタイル= "国境：0;色：＃1 f6931f;フォント重量：太字;">
</ P>
<DIVのID = "スライダー垂直"スタイル= "高さ：200pxの;"> </ div>の
</ BODY>
</ HTML>