滑块展示 js 

<!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>

posted on 2017-11-08 23:22  九宝的小跟班  阅读(216)  评论(0)    收藏  举报

导航