表单组件 / 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-end">{{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>