# slider (w-slider)

- **Import**: `WSlider` from `win-design-next`
- **Tag**: `<w-slider>`
- **说明**: Slider 滑块
- **分类**: data-entry
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/slider.md`

## API

## API

### 属性

| 属性名                      | 描述                                                                                      | 类型                                                                                                                                                                        | 默认    |
| --------------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| model-value / v-model       | 选中项绑定值                                                                              | ^[number] / ^[object]`number[]`                                                                                                                                             | 0       |
| min                         | 最小值                                                                                    | ^[number]                                                                                                                                                                   | 0       |
| max                         | 最大值                                                                                    | ^[number]                                                                                                                                                                   | 100     |
| disabled                    | 是否禁用                                                                                  | ^[boolean]                                                                                                                                                                  | false   |
| step                        | 步长                                                                                      | ^[number]                                                                                                                                                                   | 1       |
| show-input                  | 是否显示输入框，仅在非范围选择时有效                                                      | ^[boolean]                                                                                                                                                                  | false   |
| show-input-controls         | 在显示输入框的情况下，是否显示输入框的控制按钮                                            | ^[boolean]                                                                                                                                                                  | true    |
| size                        | slider 包装器的大小，垂直模式下该属性不可用                                               | ^[enum]`'' \| 'large' \| 'default' \| 'small'`                                                                                                                              | default |
| input-size                  | 输入框的大小，如果设置了 `size` 属性，默认值自动取 `size`                                 | ^[enum]`'' \| 'large' \| 'default' \| 'small'`                                                                                                                              | default |
| show-stops                  | 是否显示间断点                                                                            | ^[boolean]                                                                                                                                                                  | false   |
| show-tooltip                | 是否显示提示信息                                                                          | ^[boolean]                                                                                                                                                                  | true    |
| format-tooltip              | 格式化提示信息                                                                            | ^[Function]`(value: number) => number \| string`                                                                                                                            | —       |
| range                       | 是否开启选择范围                                                                          | ^[boolean]                                                                                                                                                                  | false   |
| vertical                    | 垂直模式                                                                                  | ^[boolean]                                                                                                                                                                  | false   |
| height                      | 滑块高度，垂直模式必填                                                                    | ^[string]                                                                                                                                                                   | —       |
| aria-label ^(a11y)          | 原生 `aria-label`属性                                                                     | ^[string]                                                                                                                                                                   | —       |
| range-start-label           | 当 `range` 为 true 时，屏幕阅读器标签开始的标记                                           | ^[string]                                                                                                                                                                   | —       |
| range-end-label             | 当 `range` 为 true 时，屏幕阅读器标签结尾的标记                                           | ^[string]                                                                                                                                                                   | —       |
| format-value-text           | 显示屏幕阅读器的 `aria-valuenow` 属性的格式                                               | ^[Function]`(value: number) => string`                                                                                                                                      | —       |
| tooltip-class               | tooltip 的自定义类名                                                                      | ^[string]                                                                                                                                                                   | —       |
| placement                   | Tooltip 出现的位置                                                                        | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | top     |
| marks                       | 标记， key 的类型必须为 `number` 且取值在闭区间 `[min, max]` 内，每个标记可以单独设置样式 | ^[object]`SliderMarks`                                                                                                                                                      | —       |
| validate-event              | 输入时是否触发表单的校验                                                                  | ^[boolean]                                                                                                                                                                  | true    |
| label ^(a11y) ^(deprecated) | 原生 `aria-label`属性                                                                     | ^[string]                                                                                                                                                                   | —       |

### 事件

| 事件名 | 说明                                               | 类型                                       |
| ------ | -------------------------------------------------- | ------------------------------------------ |
| change | 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） | ^[Function]`(value: Arrayable) => boolean` |
| input  | 数据改变时触发（使用鼠标拖曳时，活动过程实时触发） | ^[Function]`(value: Arrayable) => boolean` |
