<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 默认功能</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="jqueryui/style.css"> <script> $(function() { $( "#slider" ).slider(); }); </script> </head> <body> <div id="slider"></div> </body> </html>
1.引入js和css以及jquery <script type="text/javascript" src="jquery.min.js"></script> <link rel="stylesheet" href="jquery.range.css"> <script src="jquery.range.js"></script> 2.html添加input表单 <input type="hidden" class="single-slider" value="23" /> <button id="g1">获取值</button> 3.html加入js <script> $(function(){ $(‘.single-slider‘).jRange({ from: 0,//开始于 to: 100,//结束于 step: 1,//一次滑动多少 scale: [0,25,50,75,100],//分割点 format: ‘%s‘,//格式化格式 width: 300,//宽度 showLabels: true, showScale: true }); $(‘.range-slider‘).jRange({ from: 0, to: 100, step: 1, scale: [0,25,50,75,100], format: ‘%s‘, width: 300, showLabels: true, isRange : true//是否显示区间 }); $("#g1").click(function(){ var aa = $(".single-slider").val(); alert(aa); }); }); </script>
<script>$(function(){ $(‘.single-slider‘).jRange({ from: 0,//开始于 to: 100,//结束于 step: 1,//一次滑动多少 scale: [0,25,50,75,100],//分割点 format: ‘%s‘,//格式化格式 width: 300,//宽度 showLabels: true, showScale: true }); $(‘.range-slider‘).jRange({ from: 0, to: 100, step: 1, scale: [0,25,50,75,100], format: ‘%s‘, width: 300, showLabels: true, isRange : true//是否显示区间 }); $("#g1").click(function(){ var aa = $(".single-slider").val(); alert(aa); });});</script>原文：http://www.cnblogs.com/danhailong/p/7806907.html