源码介绍
我一直在玩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.tea9.net/Demo/vuejs-slider-pips/
下载地址
蓝奏网盘 123云盘 百度网盘(提取码tea9)
已有 2768 人阅读