ドラッグして値を選択するスライドバー機能を提供します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider" style="margin:20px;"></div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Colorpicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#red, #green, #blue {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#swatch {
width: 120px;
height: 100px;
margin-top: 18px;
margin-left: 350px;
background-image: none;
}
#red .ui-slider-range { background: #ef2929; }
#red .ui-slider-handle { border-color: #ef2929; }
#green .ui-slider-range { background: #8ae234; }
#green .ui-slider-handle { border-color: #8ae234; }
#blue .ui-slider-range { background: #729fcf; }
#blue .ui-slider-handle { border-color: #729fcf; }
</style>
<script>
function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
}
function refreshSwatch() {
var red = $( "#red" ).slider( "value" ),
green = $( "#green" ).slider( "value" ),
blue = $( "#blue" ).slider( "value" ),
hex = hexFromRGB( red, green, blue );
$( "#swatch" ).css( "background-color", "#" + hex );
}
$(function() {
$( "#red, #green, #blue" ).slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
});
$( "#red" ).slider( "value", 255 );
$( "#green" ).slider( "value", 140 );
$( "#blue" ).slider( "value", 60 );
});
</script>
</head>
<body class="ui-widget-content" style="border: 0;">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding: 4px;">
<span class="ui-icon ui-icon-pencil" style="float: left; margin: -2px 5px 0 0;"></span>
カラーピッカーサンプル
</p>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Multiple sliders</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#eq span {
height:120px; float:left; margin:15px
}
</style>
<script>
$(function() {
// setup master volume
$( "#master" ).slider({
value: 60,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
</script>
</head>
<body>
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding: 4px;">
<span class="ui-icon ui-icon-volume-on" style="float: left; margin: -2px 5px 0 0;"></span>
Master volume
</p>
<div id="master" style="width: 260px; margin: 15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding: 4px; margin-top: 4em;">
<span class="ui-icon ui-icon-signal" style="float: left; margin: -2px 5px 0 0;"></span>
Graphic EQ
</p>
<div id="eq">
<span>88</span>
<span>77</span>
<span>55</span>
<span>33</span>
<span>40</span>
<span>45</span>
<span>70</span>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<p>
<label for="amount">価格範囲:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range"></div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Range with fixed maximum</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( "#slider-range-max" ).slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<label for="amount">予約部屋数:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-max"></div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Range with fixed minimum</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 37,
min: 1,
max: 700,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<label for="amount">最大価格:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-min"></div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Slider bound to select</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
var select = $( "#minbeds" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 6,
range: "min",
value: select[ 0 ].selectedIndex + 1,
slide: function( event, ui ) {
select[ 0 ].selectedIndex = ui.value - 1;
}
});
$( "#minbeds" ).change(function() {
slider.slider( "value", this.selectedIndex + 1 );
});
});
</script>
</head>
<body>
<form id="reservation">
<label for="minbeds">ベッド数</label>
<select name="minbeds" id="minbeds">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</form>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Slider scrollbar</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
.scroll-pane { overflow: auto; width: 99%; float:left; }
.scroll-content { width: 2440px; float: left; }
.scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; }
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
</style>
<script>
$(function() {
//scrollpane parts
var scrollPane = $( ".scroll-pane" ),
scrollContent = $( ".scroll-content" );
//build slider
var scrollbar = $( ".scroll-bar" ).slider({
slide: function( event, ui ) {
if ( scrollContent.width() > scrollPane.width() ) {
scrollContent.css( "margin-left", Math.round(
ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
) + "px" );
} else {
scrollContent.css( "margin-left", 0 );
}
}
});
//append icon to handle
var handleHelper = scrollbar.find( ".ui-slider-handle" )
.mousedown(function() {
scrollbar.width( handleHelper.width() );
})
.mouseup(function() {
scrollbar.width( "100%" );
})
.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
//change overflow to hidden now that slider handles the scrolling
scrollPane.css( "overflow", "hidden" );
//size scrollbar and handle proportionally to scroll distance
function sizeScrollbar() {
var remainder = scrollContent.width() - scrollPane.width();
var proportion = remainder / scrollContent.width();
var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
scrollbar.find( ".ui-slider-handle" ).css({
width: handleSize,
"margin-left": -handleSize / 2
});
handleHelper.width( "" ).width( scrollbar.width() - handleSize );
}
//reset slider value based on scroll content position
function resetValue() {
var remainder = scrollPane.width() - scrollContent.width();
var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
parseInt( scrollContent.css( "margin-left" ) );
var percentage = Math.round( leftVal / remainder * 100 );
scrollbar.slider( "value", percentage );
}
//if the slider is 100% and window gets larger, reveal content
function reflowContent() {
var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
var gap = scrollPane.width() - showing;
if ( gap > 0 ) {
scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
}
}
//change handle position on window resize
$( window ).resize(function() {
resetValue();
sizeScrollbar();
reflowContent();
});
//init scrollbar size
setTimeout( sizeScrollbar, 10 );//safari wants a timeout
});
</script>
</head>
<body>
<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
<div class="scroll-content">
<div class="scroll-content-item ui-widget-header">1</div>
<div class="scroll-content-item ui-widget-header">2</div>
<div class="scroll-content-item ui-widget-header">3</div>
<div class="scroll-content-item ui-widget-header">4</div>
<div class="scroll-content-item ui-widget-header">5</div>
<div class="scroll-content-item ui-widget-header">6</div>
<div class="scroll-content-item ui-widget-header">7</div>
<div class="scroll-content-item ui-widget-header">8</div>
<div class="scroll-content-item ui-widget-header">9</div>
<div class="scroll-content-item ui-widget-header">10</div>
<div class="scroll-content-item ui-widget-header">11</div>
<div class="scroll-content-item ui-widget-header">12</div>
<div class="scroll-content-item ui-widget-header">13</div>
<div class="scroll-content-item ui-widget-header">14</div>
<div class="scroll-content-item ui-widget-header">15</div>
<div class="scroll-content-item ui-widget-header">16</div>
<div class="scroll-content-item ui-widget-header">17</div>
<div class="scroll-content-item ui-widget-header">18</div>
<div class="scroll-content-item ui-widget-header">19</div>
<div class="scroll-content-item ui-widget-header">20</div>
</div>
<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
<div class="scroll-bar"></div>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Snap to increments</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<label for="amount">寄付金額 (増加幅 $50):</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider"></div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Vertical range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( "#slider-range" ).slider({
orientation: "vertical",
range: true,
values: [ 17, 67 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<p>
<label for="amount">目標金額 (百万ドル):</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range" style="height: 250px;"></div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Vertical slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-vertical" style="height: 200px;"></div>
</body>
</html>
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