Slider 滑块

引入

  1. import{Slider}from'vant';
  2. Vue.use(Slider);

代码演示

基本用法

  1. <van-sliderv-model="value" @change="onChange"/>
  1. exportdefault{
  2. data(){
  3. return{
  4. value:50
  5. };
  6. },
  7. methods:{
  8. onChange(value){
  9. this.$toast('当前值:'+ value);
  10. }
  11. }
  12. };

指定选择范围

  1. <van-sliderv-model="value" :min="10" :max="90"/>

禁用

  1. <van-sliderv-model="value"disabled/>

指定步长

  1. <van-sliderv-model="value" :step="10"/>

自定义样式

  1. <van-slider
  2. v-model="value"
  3. bar-height="4px"
  4. active-color="#f44"
  5. />

自定义按钮

  1. <van-slider
  2. v-model="value"
  3. active-color="#f44"
  4. >
  5. <div
  6. slot="button"
  7. class="custom-button"
  8. >
  9. {{ value }}
  10. </div>
  11. </van-slider>

垂直方向

Slider 垂直展示时,高度为 100% 父元素高度

  1. <div :style="{ height:'100px'}">
  2. <van-sliderv-model="value"vertical/>
  3. </div>

API

Props

参数说明类型默认值版本
value当前进度百分比Number01.1.0
disabled是否禁用滑块Booleanfalse1.1.0
max最大值Number1001.1.0
min最小值Number01.1.0
step步长Number11.1.0
bar-height进度条高度String2px1.1.0
active-color进度条激活态颜色String#1989fa1.5.1
inactive-color进度条默认颜色String#e5e5e51.5.1
vertical是否垂直展示Booleanfalse1.6.13

Events

事件名说明回调参数
change进度值改变后触发value: 当前进度
drag-start开始拖动时触发-
drag-end结束拖动时触发-

Slots

名称说明
button自定义滑动按钮

Slider 滑块 - 图1