Vue怎么实现双向滑动输入条
这篇“Vue怎么实现双向滑动输入条”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue怎么实现双向滑动输入条”文章吧。
效果图如下：
组件支持传入最小值（min）最大值（max）的范围，并可设置初始最小值（initialMin）和初始最大值（initialMax）
拖动滑块调整最大最小值，并可点击输入条位置，切换数值
①创建滑动输入条组件Slider.vue
.m-slider{height:4px;position:relative;cursor:pointer;touch-action:none;&:hover{.u-slider-rail{//灰色未选择滑动条背景色background:#E3E3E3;}.u-slider-track{//蓝色已选择滑动条背景色background:#1890ff;}}.u-slider-rail{//灰色未选择滑动条背景色position:absolute;z-index:99;height:4px;width:100%;background:#f5f5f5;border-radius:2px;transition:background.3s;}.u-slider-track{//蓝色已选择滑动条背景色background:#91d5ff;border-radius:4px;position:absolute;z-index:99;height:4px;cursor:pointer;transition:background.3s;}.u-slider-handle{//滑块position:absolute;z-index:999;width:14px;height:14px;margin-top:-7px;box-shadow:0;background:#fff;border:2pxsolid#91d5ff;border-radius:50%;cursor:pointer;transition:border-color.3s,box-shadow.6s,transform.3scubic-bezier(.18,.89,.32,1.28);&:hover{border-color:#1890ff;}}}②在要使用的页面引入
{{low}}
{{high}} importSliderfrom'@/components/Slider'components:{Slider}data(){return{low:20,high:80}}lowChange(val){this.low=valconsole.log('lowChange:',val)},highChange(val){this.high=valconsole.log('highChange:',val)}
以上就是关于“Vue怎么实现双向滑动输入条”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注恰卡编程网行业资讯频道。
