magix-components
Version:
107 lines (73 loc) • 2.48 kB
Markdown
## 滑块组件
> 该组件包含“单个滑块、范围滑块”两个子组件。
### 单滑块组件
#### 使用
<a href="https://magix-components.github.io/magix-components/#!/mx-slider/index" target="_blank">在线示例</a>
```html
<mx-view path="app/gallery/mx-slider/index"
max="200"
min="100"
value="130"
step="0.05"
class="fl"
></mx-view>
```
### API
#### options
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------- | -------- | -------- |
| value | 设置滑块的值 | number | 0 |
| min | 区间最小值 | number | 0 |
| max | 区间最大值 | number | 100 |
| step | 步长 | number | 1 |
| width | 宽度 | number | 340 |
| disabled | 是否禁用 | boolean | false |
| vertical | 是否垂直 | boolean | false |
| height | 当垂直时，设置高度 | number | 340 |
#### method
| 方法名 | 说明 | 入参 | 返回值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| val | 设置或获取值 | number | number | |
> method调用方法： $('#id').invokeView('val',[20]);
#### event
#### change 滑块位置变化时触发
| 参数名称 | 参数类型 | 说明 |
| -------- | -------- |
| value | number | value |
-----
### 范围滑块组件
#### 使用
<a href="https://magix-components.github.io/magix-components/#!/mx-slider/range" target="_blank">在线示例</a>
```html
<div path="mx-slider/range"
max="200"
min="100"
value="30,150"
step="0.05"
class="fl"
></div>
```
### API
#### options
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------- | -------- | -------- |
| value | 逗号分割的值 | string | 0,0 |
| min | 区间最小值 | number | 0 |
| max | 区间最大值 | number | 100 |
| step | 步长 | number | 1 |
| width | 宽度 | number | 340 |
| disabled | 是否禁用 | boolean | false |
| vertical | 是否垂直 | boolean | false |
| height | 当垂直时，设置高度 | number | 340 |
#### method
| 方法名 | 说明 | 入参 | 返回值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| val | 设置或获取值 | array | array | |
> method调用方法： $('#id').invokeView('val',[[20,40]]);
#### event
#### change 滑块位置变化时触发
| 参数名称 | 参数类型 | 说明 |
| -------- | -------- |
| value | array | value |
| start | number | 开始滑块的值 |
| end | number | 结束滑块的值 |