一个javascript 滑竿控件

来自：http://www.verydemo.com/demo_c98_i17110.html

滑杠的取值范围、最大值最小值、小数点位数可以自定义，并可以配置滑动前、后的回调函数

 

 

 

<style> body{ font: 12px ,Arial; } /*slider strat*/ .SliderMain{ background:url(http://cdn.verydemo.com/inc/test.jsp?url=http%3A%2F%2Fpic002.cnblogs.com%2Fimages%2F2012%2F368483%2F2012112803494021.gif) no-repeat; width:181px; height:8px; position:relative; display:inline-block; zoom:1; } .SliderRange{ background:url(http://cdn.verydemo.com/inc/test.jsp?url=http%3A%2F%2Fpic002.cnblogs.com%2Fimages%2F2012%2F368483%2F2012112803495452.gif) no-repeat; width:0px; height:5px; position:absolute; top:1px; left:1px; } .sliderHandle{ background:url(http://cdn.verydemo.com/inc/test.jsp?url=http%3A%2F%2Fpic002.cnblogs.com%2Fimages%2F2012%2F368483%2F2012112803500853.gif) no-repeat; width:12px; height:19px; position:absolute; left:0px; top:-5px; font-size:0; margin-left:-5px; } /*slider end*/ /* ===== 无图片样式================= .SliderMain{ background:#E0E0E0; width:181px; height:8px; position:relative; display:inline-block; border-radius:2px; zoom:1; } .SliderRange{ background:#FF9600; width:0px; height:5px; position:absolute; top:1px; left:1px; } .sliderHandle{ background:#D6D3D6; border-radius:4px/2px; width:12px; height:19px; position:absolute; left:0px; top:-5px; font-size:0px; margin-left:-5px; } */ </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div ></p> <p></p> <p> </p> <div class="cnblogs_code"> <pre><span > <style> body{ font: 12px ,Arial; } /*slider strat*/ .SliderMain{ background:url(http://cdn.verydemo.com/inc/test.jsp?url=http%3A%2F%2Fpic002.cnblogs.com%2Fimages%2F2012%2F368483%2F2012112803494021.gif) no-repeat; width:181px; height:8px; position:relative; display:inline-block; zoom:1; } .SliderRange{ background:url(http://cdn.verydemo.com/inc/test.jsp?url=http%3A%2F%2Fpic002.cnblogs.com%2Fimages%2F2012%2F368483%2F2012112803495452.gif) no-repeat; width:0px; height:5px; position:absolute; top:1px; left:1px; } .sliderHandle{ background:url(http://cdn.verydemo.com/inc/test.jsp?url=http%3A%2F%2Fpic002.cnblogs.com%2Fimages%2F2012%2F368483%2F2012112803500853.gif) no-repeat; width:12px; height:19px; position:absolute; left:0px; top:-5px; font-size:0; margin-left:-5px; } /*slider end*/ /* ===== 无图片样式================= .SliderMain{ background:#E0E0E0; width:181px; height:8px; position:relative; display:inline-block; border-radius:2px; zoom:1; } .SliderRange{ background:#FF9600; width:0px; height:5px; position:absolute; top:1px; left:1px; } .sliderHandle{ background:#D6D3D6; border-radius:4px/2px; width:12px; height:19px; position:absolute; left:0px; top:-5px; font-size:0px; margin-left:-5px; } */ </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div ></pre> </div> <p> </p> <p> </p></div>