超实用的VueJS滑块组件，支持级联滑动和渐变色
16lz
2021-01-22
插件简介
我一直在玩VueJS，并想尝试一个实验，之前我做过一个基于jQuery UI的的滑块插件，这次我想看看这个功能用VueJS实现是多么容易。对于这个插件，我并非将所有功能都翻译过来了，因为jQuery UI的滑块组件提供了许多额外的功能， 但这个基于Vue的滑块也比较接近基于jQuery UI的了，它支持多个滑杆级联滑动，并且支持在滑杆上渲染渐变颜色。
开发者只要引用vue框架库文件和SliderPips插件库文件，就可以在HTML页面上通过简单定义slider-pips标记，即可创建出漂亮的滑块组件，使用起来非常方便。下面是示例代码：
<script src='js/vue.min.js'></script><script src="js/index.js"></script><slider-pips :min="0" :max="100" :step=5 labels :values="[5]"></slider-pips><slider-pips :min="-20" :max="20" :step=2.5 labels range :values="[-10]"></slider-pips><slider-pips :min="-17" :max="17" :step=1 :values="sliderValues" floats></slider-pips>
插件预览
插件下载
在线演示链接：
https://www.html5tricks.com/demo/vuejs-slider-pips/index.html
插件下载链接：
https://www.html5tricks.com/download/vuejs-slider-pips.rar
解压密码：RJ4587
©著作权归作者所有：来自51CTO博客作者mb5ff5930cde1cd的原创作品，如需转载，请注明出处，否则将追究法律责任更多相关文章
- jQuery五彩火焰背景的3D进度条插件
- 【前端词典】这些功能其实不需要 JS，CSS 就能搞定
- 美团面试官：生成订单后一段时间不支付订单会自动关闭的功能该如何
- Bong！5 款超牛逼的 Jupyter Notebook 插件！
- 那些功能逆天，却鲜为人知的pandas骚操作
- 杀手级的TypeScript功能：const断言[每日前端夜话0x6F]
- Chrome 74 带来的新功能[每日前端夜话0x66]
- SPI 机制-插件化扩展功能
- 用Python打造一款文件搜索工具，所有功能自己定义！