4种时尚精美的input元素滑块UI设计效果

所属分类:媒体,UI-滑块和旋转,拖和放

 30559  337  查看评论 (2)
分享到微信朋友圈
X
4种时尚精美的input元素滑块UI设计效果 ie兼容10

使用方法

HTML结构

这组滑块的HTML结构就是一个&ly;input type="range">元素。

<input type='range' id='r1' class='tip fill fill-replace'
       value='7' min='1' max='13' />
<input type='range' id='r2' class='tip fill'
       value='60' />
<input type='range' id='r3' class='tip'
       value='25' step='25' />
<input type='range' id='r4' class='fill'
       value='87' />

由于在这个滑块UI设计效果中使用了很多浏览器专用的CSS属性,所以它的效果在各个浏览器中表现的有所不一致。效果最佳的浏览器是webkit内核的浏览器,可以看到全部效果。其它浏览器或多或少有一些效果是不可见的。

相关插件-滑块和旋转,拖和放

animation滑动组件

可拖动滑块选择区间
  滑块和旋转
 30849  312

移动端左右滑动插件

移动端左右滑动插件
  滑块和旋转
 57918  398

jQuery互相限制边界的多滑块选区

jQuery滑块不重合 选值边界重合,带有初始化滑块位置功能。
  滑块和旋转
 25453  306

轮播滚动左右切换

轮播滚动左右切换
  滑块和旋转
 74514  462

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

    527658433 0
    2018/5/5 10:25:05
    百分比的 数字为什么不显示 回复
    小小程序员 0
    2015/12/31 9:12:18

    在手机上有点问题

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复