整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
所接触到的Slider滑块应用的场景，主要有图片的放大缩小，调节声音的大小。不知道小伙伴们的应用场景都有哪些呢？欢迎在文章下方留言讨论哈。
准备工作：
{
path: '/slider',
name: 'slider',
component: ()=> import('./views/Slider.vue')
}
<a href="javascript：void(0)" @click="$router.push('/slider')">
<van-col span="6" class="marb20">
<van-icon name="gift" />
<div>Slider 滑块</div>
</van-col>
</a>
至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了25个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。
代码演示Slider滑块：
基础方法：
<van-slider
v-model="value"
@change="onChange"
/>
data() {
return {
value: 30,
}
},
methods: {
onChange(value) {
console.log(value)
},
}
van-slider的值与数据结构里的value进行双向数据绑定。惟一一个事件就是change事件，当我们在滑动滑块的时候，就会触发change事件，当然change事件里会有个value值，这个value值即为当前的进度。在开发过程不中，我们可以将这个值得出来后，利用ajax请求，将这个值传给后端让他们做处理。
指定选择范围：
van-slider的取值范围是0-100 。有时候我们的需求呢取值范围并不是从0到100,而是从中间一个位置到指定一个位置结束，这时候怎么办？只需要设置一下其max和min值就可以，如下：
<van-slider v-model="value" :min="50" :max="80" @change="onChange" />
这两张图分别显示了可滑动的范围，从初始位置到终点位置。
指定步长及自定义滑块的高度：
通常根据项目的需要，会设定不一样的步长值以及不一样的高度，可以这样定义一下：
<van-slider v-model="value" :step="20" bar-height="6px" @change="onChange" />
:step: 这样每次滑动只能滑动20
bar-height: 设置滑块的高度。这里是以px为计量单位的。
这个组件的应用就是这么简单。组件虽然简单，最重要的还是在项目中如何去应用它，当我们遇到类似的应用时，我们应该即时想起这个组件，以及是否是这个组件的变形。
好啦，我们又学会一个组件了！鼓掌吧！我们的开发效率又提高了一点点呢。每天积累一点点，一年后会发现收获满满。期待听到大家的成果噢！
今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油
有你能用上的插件（vue插件总结）
框架
编辑器
slider
图表
日历
地址选择
地图
播放器
滚动scroll
文件上传
图片处理
总有你能用上的插件（vue插件总结）
提示
进度条
其他
总有你能用上的插件（vue插件总结）
具体组件地址，请点击下方“了解更多”！
更多资源敬请关注！
Vue官方资源（未翻译）https://github.com/vuejs/awesome-vue
此篇来源@web秀 https://www.toutiao.com/a6599426533952061956/
*请认真填写需求信息，我们会在24小时内与您取得联系。
