滑块

示例

0100
50500
基础用法

minmax指定取值范围,v-model进行双向数据绑定。动态改变组件的取值范围,组件会修正value值不让它超出该范围

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
50500
设置步长

通过step可以设置步长,默认步长为1

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
0100
50100
禁用组件

添加disabled禁用组件

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
0100
范围选择

指定isRange使组件支持范围选择,此时v-model绑定的数据为数组,并且不会展示input输入框。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
0100
01
展示间隔点

Slider指定isShowStop属性,可以展示间隔点,在间隔点不密集时使用。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
123456月7891年2年3年
123456月7891年2年3年
展示标签

通过marks属性,可以给Slider标注刻度,该属性类型为Objectkey表示组件的值,value为该值对应展示的标注文案。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
min 最小值 Number 0
max 最大值 Number 100
value 当前值,可用v-model双向绑定 Number | Array 0
unit 单位,用于刻度展示 String ""
isShowEnd 是否展示最小值和最大值刻度 Boolean true
isShowInput 是否展示输入框 Boolean true
step 步长 Number 1
isShowStop 是否展示间隔点 Boolean false
marks 标注刻度 Object undefined