Tea9源码网 - 免费分享精品源码、教程、软件|全网干货资源收集,免费下载。
  • 首页
  • HTML源码
  • 超实用的VueJS滑块组件,支持级联滑动和渐变色

超实用的VueJS滑块组件,支持级联滑动和渐变色

发布:前端资讯2021-10-31 13:22分类: HTML源码 标签: javascrip HTML5 Vue.js 滑块组件

源码介绍

我一直在玩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>

相关截图

20211031132229.jpg

在线演示

https://www.tea9.net/Demo/vuejs-slider-pips/
下载地址 
蓝奏网盘 123云盘 百度网盘(提取码tea9) 
温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

已有 2294 人阅读