jquery silder 滑动条使用

 

  引用
 
 

  附件传个效果图，碰到SB非要这效果真无奈了
 

 

  引用
 
 

  API页面：http://api.jqueryui.com/slider/
 

 

  引用
 
 

  JS
 
<!-- jquery slider  -->
		<script type="text/javascript" src="jslider/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="jslider/jquery-ui.js"></script>
		<link rel="stylesheet" href="jslider/jquery-ui.css" type="text/css" />

$(document).ready( function() {
				$("#chValue").val(1);//设定相似阈值的默认值
				$( "#slider" ).slider({//初始化设置相似阈值的拖动滑动条
				max: 100 ,
				min:1,
				change: function( event, ui ) {
					$("#chVal").html(ui.value);
					$("#chValue").val(ui.value);
				}
				});
);

 

  引用
 
 

  HTML
 
<div id="chDiv" style="display:none;width:500px;">
						<span style="background-color:yellow;">
						<font style="font-size: 14;" >拖动设置相似阈值(百分比，最大100)：[ <font style="font-size: 16;color: red;" ><span id="chVal">1</span></font> ]</font></span>
						<span style="float: right"><input type="button" style="float: right;" onclick="javascript:startch();" value="启动多通道关联任务" /></span>
						<div id="slider" style="width: 280px;"></div>
						<input id="chValue" type="hidden" value="1" style="width: 35px;" maxlength="3" />&nbsp;&nbsp; 
						<br/>
					</div>