Jquery插件价格拖动效果

先上一个效果图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <link rel="stylesheet" href="./css/normalize.css" />
  <link rel="stylesheet" href="css/ion.rangeSlider.css" />
  <link rel="stylesheet" href="css/ion.rangeSlider.skinFlat.css" id="styleSrc" />
  <style>
    body{
    }
    .irs-line{
      background-color: #d8d8d8;
      height: 2px;
      top: 30px;
    }
    .irs-slider{
      width: 18px;
      height: 18px;
      background: #fff;
      border:1px solid #2cadd7;
      border-radius: 3px;
    }
    .irs-bar{
      background-color: #2cadd7;
      height: 4px;
      top: 28px;
    }
    .irs-from, .irs-to, .irs-single {
      color: #333;
      text-align: center;
      width: 60px;
      height: 20px;
      top: -8px;
      font-size: 14px;
      line-height: 20px;
      background-color: #fff;
      border: 1px solid #ddd;
    }
    .irs-min,.irs-max{
      visibility: hidden!important;
    }
    .irs-from:before, .irs-to:before, .irs-single:before{
      position: absolute;
      display: block;
      content: "";
      bottom: -10px;
      left: 50%;
      width: 0;
      height: 0;
      margin-left: -3px;
      overflow: hidden;
      border: 5px solid transparent;
      border-top-color: #ddd;
    }
    .irs-from:after, .irs-to:after, .irs-single:after{
      position: absolute;
      display: block;
      content: "";
      bottom: -9px;
      left: 50%;
      width: 0;
      height: 0;
      margin-left: -3px;
      overflow: hidden;
      border: 5px solid transparent;
      border-top-color: #fff;
    }
  </style>
</head>
<body>
<div style="position:relative; padding:50px;width:250px;margin:0 auto;font-size:12px;">
  <input type="text" id="range" />
  <br/><br/><br/>
</div>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/ion.rangeSlider.js"></script>
<script type="text/javascript">
  $(document).ready(function(){

    $("#range").ionRangeSlider({
      min: 0,
      max: 100,
      from:0,
      to: 100,
      type: 'double',//设置类型
      step: 1, 
      prefix: "",//设置数值前缀
      postfix: "万",//设置数值后缀
      prettify: true,
      hasGrid: true
    });

    $("#selectStyle").change(function(){
      $("#styleSrc").attr("href",$(this).val());
    });

  });
</script>
</body>
</html>

此插件更适合手机端一些，pc也可以用本人是用在pc弹窗中一个效果

里面有些样式直接修改了

附上官方网站地址：http://ionden.com/a/plugins/ion.rangeSlider/index.html

Jquery插件价格拖动效果

猜你喜欢