input range滑块插件 Powerange

1、引入js和css，别忘了jquery，要在powerange.js前面

<link rel="stylesheet" href="dist/powerange.css" />
<script src="dist/jquery.js"></script>
<script src="dist/powerange.js"></script>

2、html需要加入的内容：必须有input表单，并且定义class或者id

<input type="text" class="js-min-max-start" style="display: none;">

3、html需要加入的js

<script>
var elem = document.querySelector('.js-min-max-start');//选择input元素
var init = new Powerange(elem, { min: 16, max: 256, start: 128 });//实例化powerange类并且初始化参数
</script>

ps：可选参数如下

//默认值如下,不同参数请以逗号分隔；
defaults = {
   callback      : function() {},//回调函数
   decimal       : false,//是否显示小数点
   disable       : false,//是否禁用
   disableOpacity: 0.5,//禁用是显示的透明度
   hideRange     : false,//是否在两头显示最大值和最小值
   klass         : '',//添加自定义class
   min           : 0,//最小值
   max           : 100,//最大值
   start         : null,//从哪里开始
   step          : null,//写上数字可以实现一次滑动你填写的数字
   vertical      : false,//默认水平显示 true时垂直显示
};

 

转载于:https://www.cnblogs.com/learnmo/p/6594461.html