@HTML
<link type="text/css" href="http://lightbox.in.coocan.jp/jquery/jqcss/black-tie/jquery-ui-1.10.1.custom.css" rel="stylesheet" /><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script><style type="text/css">
.ui-slider  {			/* スライダー本体 */
	height: 200px;
	width: 10px;
}
.ui-slider .ui-slider-handle {
	width: 1.0em;		/* ハンドルの幅 */
	height: 1.0em;		/* ハンドルの高さ */
	border-radius: 10px;	/* ハンドルを丸くする */
}

</style><script type="text/javascript">
$(function() {

	// 数値表示部分の CSS
	// id に "amount" と先頭に付く demo クラス内
	$(".demo input[id^='amount']")
		.css("border", 0)
		.css("color","#f6931f")
		.css("font-weight","bold")
		.css("width","30px")
		.css("margin-left","50px")
		.css("margin-bottom","10px");

	// 縦スライダー1
	$( "#slider-vertical1" ).slider({
		orientation: "vertical",
		range: "min",
		min: 0,
		max: 1000,
		value: 100,
		slide: function( event, ui ) {
			$( "#amount1" ).val( ui.value );
		}
	});
	$( "#amount1" ).val( $( "#slider-vertical1" ).slider( "value" ) )
	// 入力してフォーカスが外れると、スライダーが変化
	.bind("change",function(){
		// 入力チェックなし
		$( "#slider-vertical1" ).slider( "value", $( this ).val() );
	});


	// 縦スライダー2
	$( "#slider-vertical2" ).slider({
		orientation: "vertical",
		range: "min",
		min: 0,
		max: 1000,
		value: 200,
		slide: function( event, ui ) {
			$( "#amount2" ).val( ui.value );
		}
	});
	$( "#amount2" ).val( $( "#slider-vertical2" ).slider( "value" ) )
	// 入力してフォーカスが外れると、スライダーが変化
	.bind("change",function(){
		// 入力チェックなし
		$( "#slider-vertical2" ).slider( "value", $( this ).val() );
	});

});
</script>

<div class="demo"><table style='table-layout: fixed;width:80px;'>
<tr>
	<td>	<input type="text" id="amount1" />
		<div id="slider-vertical1" ></div></td>

	<td>	<input type="text" id="amount2" />
		<div id="slider-vertical2"></div></td>
</tr>
</table></div>
<input type="text" id="amount3" value="ここは、セレクタ対象外" />
@HEND
@DIV
<link type="text/css" href="http://lightbox.in.coocan.jp/jquery/jqcss/black-tie/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<style type="text/css">
.ui-slider  {			/* スライダー本体 */
	height: 200px;
	width: 10px;
}
.ui-slider .ui-slider-handle {
	width: 1.0em;		/* ハンドルの幅 */
	height: 1.0em;		/* ハンドルの高さ */
	border-radius: 10px;	/* ハンドルを丸くする */
}

</style>

<script type="text/javascript">
$(function() {

	// 数値表示部分の CSS
	// id に "amount" と先頭に付く demo クラス内
	$(".demo input[id^='amount']")
		.css("border", 0)
		.css("color","#f6931f")
		.css("font-weight","bold")
		.css("width","30px")
		.css("margin-bottom","10px");

	// 縦スライダー1
	$( "#slider-vertical1" ).slider({
		orientation: "vertical",
		range: "min",
		min: 0,
		max: 1000,
		value: 100,
		slide: function( event, ui ) {
			$( "#amount1" ).val( ui.value );
		}
	});
	$( "#amount1" ).val( $( "#slider-vertical1" ).slider( "value" ) )
	// 入力してフォーカスが外れると、スライダーが変化
	.bind("change",function(){
		// 入力チェックなし
		$( "#slider-vertical1" ).slider( "value", $( this ).val() );
	});


	// 縦スライダー2
	$( "#slider-vertical2" ).slider({
		orientation: "vertical",
		range: "min",
		min: 0,
		max: 1000,
		value: 200,
		slide: function( event, ui ) {
			$( "#amount2" ).val( ui.value );
		}
	});
	$( "#amount2" ).val( $( "#slider-vertical2" ).slider( "value" ) )
	// 入力してフォーカスが外れると、スライダーが変化
	.bind("change",function(){
		// 入力チェックなし
		$( "#slider-vertical2" ).slider( "value", $( this ).val() );
	});

});
</script>

<div class="demo">

<table>
<tr>
	<td>
		<input type="text" id="amount1" />
		<div id="slider-vertical1" ></div>
	</td>

	<td>
		<input type="text" id="amount2" />
		<div id="slider-vertical2"></div>
	</td>
</tr>
</table>

</div>
<br />
<input type="text" id="amount3" value="ここは、セレクタ対象外" />
@END