技術標籤：vue 外掛 滑塊驗證

外掛簡介

我一直在玩VueJS，並想嘗試一個實驗，之前我做過一個基於jQuery UI的的滑塊外掛，這次我想看看這個功能用VueJS實現是多麼容易。對於這個外掛，我並非將所有功能都翻譯過來了，因為jQuery UI的滑塊元件提供了許多額外的功能， 但這個基於Vue的滑塊也比較接近基於jQuery UI的了，它支援多個滑桿級聯滑動，並且支援在滑桿上渲染漸變顏色。

開發者只要引用vue框架庫檔案和SliderPips外掛庫檔案，就可以在HTML頁面上通過簡單定義slider-pips標記，即可創建出漂亮的滑塊元件，使用起來非常方便。下面是示例程式碼：

<scriptsrc='js/vue.min.js'>script>
<scriptsrc="js/index.js">script>

<slider-pips:min="0":max="100":step=5labels:values="[5]">slider-pips>

<slider-pips:min="-20":max="20":step=2.5labelsrange: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框架比較熟悉，你還可以學習這個外掛的原始碼。

每日分享前端外掛乾貨，歡迎關注！

點贊和在看就是最大的支援❤️