vue 插件滑块验证_超实用的VueJS滑块组件，支持级联滑动和渐变色

插件简介我一直在玩VueJS，并想尝试一个实验，之前我做过一个基于jQuery UI的的滑块插件，这次我想看看这个功能用VueJS实现是多么容易。对于这个插件，我并非将所有功能都翻译过来了，因为jQuery UI的滑块组件提供了许多额外的功能，但这个基于Vue的滑块也比较接近基于jQuery UI的了，它支持多个滑杆级联滑动，并且支持在滑杆上渲染渐变颜色。开发者只要引用vue框架库文件...

刘景初

1235人浏览 · 2020-12-03 17:51:22

刘景初 · 2020-12-03 17:51: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

你可以点击底部“阅读原文”前往我们的官方网站html5tricks，在那里你可以在线演示这款实用炫酷的VueJS滑块组件，并且下载这个组件。同时，如果你对vuejs框架比较熟悉，你还可以学习这个插件的源码。

每日分享前端插件干货，欢迎关注！

点赞和在看就是最大的支持❤️

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^