jQuery 縦 Slider を二つ

jQuery 縦 Slider を二つ

日時： 2012/04/23 00:52
名前： lightbox

拡張子:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=euc-jp">
<link rel="shortcut icon" href="http://winofsql.jp/WinOfSql.ico" />

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>

<style>
.ui-slider .ui-slider-handle {
	width: 1.0em;
	height: 1.0em;
}
</style>

</head>
<body>
	<script>
	$(function() {
		$( "#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" ) );

		$( "#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" ) );

	});
	</script>



<div class="demo">

<table>
<tr>

<td>
<input type="text" id="amount1" style="border:0; color:#f6931f; font-weight:bold;width:30px;margin-bottom:10px;" />

<div id="slider-vertical1" style="height:200px;width:10px;"></div>
</td>

<td>
<input type="text" id="amount2" style="border:0; color:#f6931f; font-weight:bold;width:30px;margin-bottom:10px;" />

<div id="slider-vertical2" style="height:200px;width:10px;"></div>
</td>


</tr>
</table>

</div>

</body>
</html>

セレクタによる ID名対象CSS 設定とイベント / スタイルシートで見通しを良く ( No.1 )

日時： 2018/02/06 19:16
名前： lightbox





		
		

		
		




拡張子:<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="ここは、セレクタ対象外" />

プライバシーポリシー