# Slider 滑动输入条

## 何时使用
需要滑动输入调整数值时使用


### 基本使用
基本的可调节的今日温度的滑动输入条

@[demo](demo/basic.vue)


### 带有控制按钮和自定义刻度
示例

@[demo](demo/step.vue)


### 带有范围区间的使用
捕获过滤器的最小值和最大值

@[demo](demo/range.vue)


### Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| direction | 设置组件的方向，可选值：`['horizo​​ntal'，'vertical']` | `String` | `'horizontal'` |
| event-type | 事件类型，可选值：`['auto'，'none']` | `String` | `'auto'` |
| width | 组件的宽度 | `[Number, String]` | `'auto'` |
| height | 组件的高度 | `[Number, String]` | `6` |
| dot-size | 确定滑块的宽度和高度。设置 `width`＆`height`, `use dot-width`＆`dot-height` props的不同值 | `Number` | `16` |
| dot-width | 滑块的宽度。如果指定，则覆盖值 dot-size | `Number` | `16` |
| dot-height | 滑块的高度。如果指定，则覆盖值 dot-size | `Number` | `16` |
| min | 可以选择的最小数值 | `Number` | `0` |
| max | 可以选择的最大数值 | `Number` | `100` |
| interval | 分段间隔 | `Number` | `1` |
| show | 显示组件 | `Boolean` | `true` |
| speed | 过渡时间 | `Number` | `0.5` |
| disabled | 是否禁用组件 | `Boolean` | `false` |
| debug | `如果您不需要在生产环境中打印错误，可以设置为 process.env.NODE_ENV !== 'production'` | `Boolean` | `true` |
| piecewise | 是否将分值显示为分段节点 | `Boolean` | `false` |
| piecewise-label | 是否显示标签 | `Boolean` | `false` |
| tooltip | 控制工具提示，可选值：`['hover'，'always'，false]` | `[String, Boolean]` | `'always'` |
| tooltip-dir | 设置工具提示的方向，可选值：`['top'，'bottom'，'left'，'right']` | `[String, Array]` | 类型为`horizo​​ntal`时默认值为`'top'`，类型为`vertical`时默认为`'left'` |
| reverse | 组件是否反转`如从右到左，从上到下` | `Boolean` | `false` |
| value | 初始值 `如果是数组，则显示为范围模式` | `[ Number, String, Array, Object ]` | `0` |
| data | 自定义数据 | `Array` | `null` |
| clickable | 滑块是否可点击以及是否可拖拽 | `Boolean` | `true` |
| stop-propagation | 所有事件都会执行 `stopPropagation` | `Boolean` | `false` |
| real-time | 是否实时计算组件的布局 | `Boolean` | `false` |
| lazy | 是否在拖拽结束后同步值 `如果每次更新操作都是高消耗操作（如Ajax）` | `Boolean` | `false` |
| fixed | 固定两个值之间的距离`仅在范围模式下有效` | `Boolean` | `false` |
| process-dragable | 进程栏是否可拖动`仅在范围模式下有效` | `Boolean` | `false` |
| formatter | 格式化工具提示的值，`例如：formatter='¥{value}'或formatter: (v) => '¥${v}'` | `[String,Function]` | `null` |
| use-keyboard | 是否打开键盘控制`仅支持方向键` | `Boolean` | `false` |
| actions-keyboard | 自定义键盘事件，默认：`←，↓`为减 `→，↑` 为增 `i是索引值` | `Array` | `[(i) => i - 1, (i) => i + 1]` |
| bg-style |  背景的样式 | `Object` | `null` |
| slider-style | 滑块的样式 | `[Object, Array, Function<Value, Index>]` | `null` |
| process-style | 进程栏的样式 | `Object` | `null` |
| piecewise-style | 分段点的样式 | `Object` | `null` |
| piecewise-active-style | 激活状态下分段点的样式 | `Object` | `null` |
| tooltip-style | 工具提示的样式 | `[Object, Array, Function<Value, Index>]` | `null` |
| label-style | 标签的样式 | `Object` | `null` |
| label-active-style | 处于激活状态的标签样式 | `Object` | `null` |
| focus-style | 聚焦时滑块的样式。（`use-keyboard`为`true`时生效） | `[Object, Array, Function<Value, Index>]` | `null` |

### Slots
| name | 说明 |
| --- | --- |
| tooltip | 自定义工具提示插槽。可选值：`[value，index（仅限范围模式）]` |
| piecewise | 自定义分段插槽。可选值：`[label，index，active，first，last]` |
| label | 自定义标签插槽。可选值：`[label，index，active，first，last]` |


### Events
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| callback | 当 value 改变时触发 |	 Params: value[Number] |
| drag-start | 拖动开始事件 | Params: context[Object] |
| drag-end | 拖动结束事件 | Params: context[Object] |


### Function
| 方法名称 | 说明 | 回调参数 |
| --- | --- | --- |
| setValue | 设置 value | - |
| setIndex | 设置位置节点 | - |
| getValue | 获取 value | - |
| getIndex | 获取当前节点位置 | - |
| refresh | 重置 Slider | - |