滑块插件Powerange

所属分类:输入-拖和放

 43094  316  查看评论 (12)
分享到微信朋友圈
X
滑块插件Powerange ie兼容10

它的许多特征,包括改变颜色和整体风格,水平和垂直样式,自定义分钟之间切换,最大值和启动,自定义的步进间隔,显示十进制值,显示图标而不是最小/最大数,它是一个非常强大的用户界面工具,希望可以用在您的网站上。

使用方法,请查看Demo写的很详细了。


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时垂直显示
};
相关插件-拖和放

jquery 拖拽排序

jQuery图片列表拖拽排序布局插件
  拖和放
 31896  364

jQuery刻度尺特效(移动端)

jQuery手指滑动刻度尺选择值特效是一款手机移动端滑动刻度尺代码。
  拖和放
 35527  325

Sortable – 简单灵活的 JavaScript 拖放排序插件

Sortable 简单灵活的 JavaScript 拖放排序插件
  拖和放
 103202  445

jQuery移动端滑动标尺

移动端卡尺,滑动标尺,标不动
  拖和放
 24925  319

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    670068491 0
    2020/7/11 15:02:55
    vertical这个参数没有效果,用了后滑动条无法使用 回复
    Mr. Z 0
    2019/5/6 16:31:38
    外部改变滑块的值可以用 init.setStart(50000); 回复
    李志超900908 0
    2019/1/15 14:41:59
    这个怎么可以修改右边的数字来触发左边进度条的改变 回复
    Ok. 0
    2018/5/29 18:38:56
    初始化的start没有效果 是什么问题?
        fly-小猛艺术0
        2018/10/18 16:52:04
        肯定是你没弄对,有效果的
    回复
    悦己 0
    2017/4/27 14:34:04

    为什么一直显示“Powerange is not defined”呢??

    回复
    笑点低是病么? 0
    2016/10/20 18:10:23
    有个问题请大神帮忙解决一下,设的这个属性为1“start: 1”,我把滑动条外层的盒子隐藏掉,触发事件后让滑动条显示后,滑动按钮默认在0的位置,请问这个问题怎么解决,滑动条一定要触发时间才能显示!!!!!!1 回复
    V 0
    2015/12/11 20:12:36

    饿,想到办法解决了

    直接把 滑块自己创建的 .range-bar 的div 给remove 掉就完美解决这个问题了

    回复
    V 0
    2015/12/11 20:12:10

    不好用,如果以一个点击事件来触发滑动条, 滑动条就会多创建1次, 效果就是 很多个滑动条叠在一起 

    回复
    嘿丶哥子 0
    2015/4/29 13:49:42
    我想请教一下,这个插件能不能 修改右边的数字 来触发 左边的进度条改变呢 ?
        wyx0
        2018/5/19 11:06:30
        可以的
    回复
    嘿丶哥子 0
    2015/4/29 13:46:39
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复