滑块插件Powerange

所属分类:输入-拖和放

 43162  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自由拖曳照片插件

可自由拖曳照片,并展现文字和内容
  拖和放
 27379  324

jquery拖拽插件

jquery拖拽排序插件,和别的拖拽插件不同这个一次只能拖动到临近的位置。
  拖和放
 39054  333

jQuery拖拽拖放插件DAD

DAD 是一款基于 jQuery 的拖拽拖放插件,它支持常见的水平拖放、垂直拖放、多行拖放、指定拖放区域、回调函数、允许禁止拖放等等,同时你也可以稍加改造,做成类似垃圾篓、购物车等效果。
  拖和放
 79459  651

jquery拖动排序插件Nestable

jquery拖动排序插件Nestable
  拖和放
 86769  474

讨论这个项目(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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复