# UComboSlider 滑块
- [示例](#示例)
- [基本用法](#基本用法)
- [提示](#提示)
- [最大值和最小值](#最大值和最小值)
- [只读和禁用](#只读和禁用)
- [精度与间隔](#精度与间隔)
- [范围](#范围)
- [同步时机](#同步时机)
- [格式化](#格式化)
- [显示输入框button](#显示输入框button)
- [显示tooltip](#显示tooltip)
- [双滑块](#双滑块)
- [API]()
- [Props/Attrs](#propsattrs)
- [Events](#events)
- [ARIA and Keyboard](#aria-and-keyboard)
**Form**
滑动选择
## 示例
### 基本用法
``` html
```
### 提示
``` html
步长为10GB
```
### 最大值和最小值
``` html
```
### 只读和禁用
``` html
```
### 精度与间隔
精度表示数字要保留的最小单位，整数、小数均可，输入框会根据它作四舍五入。默认为`1`，即保留到整数。
间隔表示点击按钮或按上下键所增加或减少的量，最好为精度的整数倍。
间隔为`0`时，滑块拖动连续，数值保留到精度。
``` html
```
### 范围
使用`range`可以进一步对`value`限制，通常传入一个数组，第一个值表示范围开始值，第二个值表示范围的结束值。
``` html
```
### 同步时机
用`sync-on`属性可以设置输入后何时同步值到``组件中。
``` html
```
### 格式化
通常可以用以下字符组成一个格式化字符串：
- `0`表示数字占位符。如果整数部分长度小于占位符的数量，则用`0`补足。如果小数部分长度大于占位符数量，则会四舍五入。
- `#`表示数字占位符。只显有意义的零而不显示无意义的零。
- `.`表示小数点。
- `,`表示千分位。
也可以传入一个包含`get`和`set`方法的格式化对象。
``` html
```
### 显示输入框button
``` html
```
### 显示tooltip
``` html
```
### 双滑块
``` html
```
## API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| tip | string | | | |
| value.sync, v-model | number, Array\ | | `0` | |
| min | number | | `0` | |
| max | number | | `100` | |
| step | number | | `1` | 间隔，`0`表示连续 |
| precision | number | | `1` | 精度，表示数字要保留的最小单位，整数、小数均可 |
| range | Array | | `[]` | 进一步对`value`限制，通常传入一个数组，第一个值表示范围开始值，第二个值表示范围的结束值 |
| formatter | string, object | | | 格式化字符串，具体参见示例。也可以传入一个包含`get`和`set`方法的格式化对象 |
| multiple | boolean | | `false` | 设置是否展示双滑块 |
| unit | string | | | |
| sync-on | string | `[object Object]`
`[object Object]` | `'input'` | |
| hide-buttons | boolean | | `true` | |
| show-tooltip | boolean | | `false` | 鼠标悬浮时展示Tooltip提示信息 |
| tooltip | string | | | Tooltip提示信息设置。在展示提示信息开关打开的情况下才会生效 |
| readonly | boolean | | `false` | 正常显示，但禁止选择/输入 |
| disabled | boolean | | `false` | 置灰显示，且禁止任何交互（焦点、点击、选择、输入等） |
### Events
#### @input
滑块的值改变时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | number | 滑块的值 |
#### @slide
拖动滑块时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | number | 滑块的值 |
| $event.oldValue | number | 旧的值 |
| $event.percent | number | 滑块位置所在的百分比 |
#### @change
滑块的值改变后触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | number | 改变后的值 |
| $event.oldValue | number | 旧的值 |
#### @number-input
改变数字输入框的值后触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event.value | number | 改变后滑块的值 |
#### @slide-end
拖动滑块结束后触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event.value | number | 改变后的值 |
### ARIA and Keyboard
| Key | Description |
| --- | ----------- |
| ↑ | 按`step`量增加值 |
| ↓ | 按`step`量减小值 |
| Enter | 自动修复为合法的值，并且应用更改 |