Range

表单组件 / Range滑块组件

注意

源码:

传入属性 / Props:

Name Type Attributes Default Description
color String <optional>
颜色
disabled Boolean <optional>
false 是否禁用
dualKnobs Boolean <optional>
false 选择的拖动按钮, 默认是一个, true为两个
max Number <optional>
100 range的最大值
min Number <optional>
0 range的最小值
mode String <optional>
'ios' 模式
pin Boolean <optional>
false 当拖动knob时显示大头针提示
snaps Boolean <optional>
false 类似于卡槽, 如果为true, 则在range上画标尺, 并且拖动中knob只能停留在标尺标记处
step Number <optional>
1 移动的步伐/粒度
value String | Number | Object <optional>
v-model对应的值, 需要出发input事件

插槽 / Slots:

Name Description
range-right 在range组件右边, 一般放Icon
range-left 在range组件左边, 一般放Icon

用法 / Usages

<List>
   <ListHeader>
       <span>Brightness</span>
       <Badge slot="item-right">{{brightness}}</Badge>
   </ListHeader>
   <Item>
        <Range v-model="brightness">
           <Icon slot="range-left" small name="sunny"></Icon>
           <Icon slot="range-right" name="sunny"></Icon>
       </Range>
   </Item>
</List>