|
日時: 2018/02/06 19:16
名前: lightbox
|
日時: 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="ここは、セレクタ対象外" />
|