# USlider 滑块 - [示例](#示例) - [基本用法](#基本用法) - [最大值和最小值](#最大值和最小值) - [连续和间隔](#连续和间隔) - [范围](#范围) - [只读和禁用](#只读和禁用) - [展示 ToolTip](#展示-tooltip) - [双滑块](#双滑块) - [API]() - [Props/Attrs](#propsattrs) - [Events](#events) **表单控件**, **块级展示** ## 示例 ### 基本用法 ``` html ``` ### 最大值和最小值 ``` html ``` ### 连续和间隔 ``` html ``` ### 范围 使用`range`可以进一步对`value`限制，通常传入一个数组，第一个值表示范围开始值，第二个值表示范围的结束值。 ``` html ``` ### 只读和禁用 ``` html ``` ### 展示 ToolTip ``` html ``` ### 双滑块 ``` html ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | value.sync, v-model | number | | `0` | 滑块的值 | | min | number | | `0` | 最小值 | | max | number | | `100` | 最大值 | | step | number | | `1` | 间隔，表示点击按钮或按上下键所增加或减少的量。`0`表示连续 | | precision | number | | `1` | 精度，表示数字要保留的最小单位，整数、小数均可 | | range | Array | | `[]` | 进一步对`value`限制，通常传入一个数组，第一个值表示范围开始值，第二个值表示范围的结束值。 | | readonly | boolean | | `false` | 是否只读 | | disabled | boolean | | `false` | 是否禁用 | | show-tooltip | boolean | | `false` | 鼠标悬浮时展示提示文字 | | tooltip | string | | | Tooltip文字设置。在展示Tooltip开关打开的情况下才会生效 | | multiple | boolean | | `false` | 设置是否展示双滑块 | ### Events #### @input 拖动滑块时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | number | 滑块的值 | | senderVM | USlider | 发送事件实例 | #### @slide 拖动滑块时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | number | 滑块的值 | | $event.oldValue | number | 旧的值 | | $event.percent | number | 滑块位置所在的百分比 | | senderVM | USlider | 发送事件实例 | #### @change 滑块的值改变时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | number | 改变后的值 | | $event.oldValue | number | 旧的值 | | senderVM | USlider | 发送事件实例 |