[comp: slider] add slider component

[imguolao]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

滑动型输入器，展示当前值和可选范围。

What does the proposed API look like?

Props

名称	说明	类型	默认值	全局配置	备注
v-model:value	绑定值	number | [number, number]	0 | [0, 0]	-	-
control	控件控制器	string | number | AbstractControl	-	-	配合 @idux/cdk/forms 使用, 参考 Form
disabled	设置禁用状态	boolean	false	-	-
dots	显示间断点	boolean	false	-	marks 间断点会始终显示
marks	刻度标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式	object	-	-	{ number: string | VNode } or { number: { style: object, label: string | VNode } } or { number: () => VNode }
keyboard	启用键盘行为	boolean	true	-	-
max	最大值	number	100	-	-
min	最小值	number	0	-	-
range	设置范围选择模式	boolean	false	-	双滑块模式
reverse	设置反向坐标轴	boolean	false	-	-
step	步长	number	1	-	要大于0
tooltipFormatter	格式化 tooltip 内容	(value: number) => VNode | string | number	-	-	-
tooltipPlacement	设置 tooltip 显示位置	string	auto	-	参考 Tooltip
tooltipVisible	设置 tooltip 显示状态	boolean	-	-	tooltip 默认为 hover 和拖拽时显示，tooltipVisible 设置为 true 则始终显示，反之则始终不显示
vertical	设置垂直状态	boolean	false	-	-
onInput	拖动滑块时触发	(value: number) => void	-	-	-
onChange	Slider 的值改变后触发(mouseup 阶段触发)	(value: number) => void	-	-	-

[danranVm]

re #153

[imguolao]

@danranVm need review.

[zymoplastic]

1. 既然支持刻度, 建议提供只能拖拽到刻度的模式?注意考虑与步长之间的关系, 应该支持 单独步长, 单独刻度, 刻度和步长同时使用

[zymoplastic]

2. 事件 change 和 input 区分度较低, 能否考虑其中一个换个名字?

[zymoplastic]

3. 可以看下是不是需要加一个 start 事件, 即开始拖拽时触发的事件

[danranVm]

• value 的类型应该是 number | number[] , 不需要支持全局配置
• disabled 不需要支持全局配置
• tooltip 相关的 props 暂时不支持全局配置吧
• ticksVisible 是什么情况下使用？声明了 marks 但是不需要 marks 显示出来？
• step 建议可以为 0 ？ 为 0 时，只能拖到刻度之上，也就是 @zymoplastic 的第一点建议

[danranVm]

1. 事件 change 和 input 区分度较低, 能否考虑其中一个换个名字?

这个我认为叫 change 和 input 没问题，vue 官方就是这么使用的，参考：https://vue3js.cn/docs/zh/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95

[danranVm]

1. 可以看下是不是需要加一个 start 事件, 即开始拖拽时触发的事件

这个有什么使用场景吗？感觉有 input 就够了吧

[zymoplastic]

1. 可以看下是不是需要加一个 start 事件, 即开始拖拽时触发的事件

这个有什么使用场景吗？感觉有 input 就够了吧

我们这个组件是鼠标拖拽类型的, 既然有了松开鼠标后触发的事件, 加一个鼠标开始的时候触发的事件我觉得是自然的, 就像 DOM 里面鼠标的事件是成双成对的一样, 可以考虑命名为 start, change 和 end

[imguolao]

• value 的类型应该是 number | number[] , 不需要支持全局配置
• disabled 不需要支持全局配置
• tooltip 相关的 props 暂时不支持全局配置吧
• ticksVisible 是什么情况下使用？声明了 marks 但是不需要 marks 显示出来？
• step 建议可以为 0 ？ 为 0 时，只能拖到刻度之上，也就是 @zymoplastic 的第一点建议

1. value 不支持全局配置，类型设置为 number | [number, number]，因为只提供了双滑块模式，没有提供多滑块（要提供吗？），所以当 range 为 false 时，使用 number，否则用 [number, number]

2. disabled 不支持全局配置

3. tooltip 相关的 props 不支持全局配置

4. ticksVisible 是这样设想的，当使用 step 步长的时候，每次拖拽就只能拖拽 step 相应的长度，类似于拖动到刻度上，但滑动条隐藏了刻度。也就是说设置了步长相当于设置了隐藏的刻度，ticksVisible 就是把刻度显示出来。
   按照这个设想，会出现5种情况：
   a. 只设置了 step，那么滑动条会有隐藏的刻度，然后每次拖动只能拖到隐藏刻度上
   b. 设置了 step，然后 ticksVisible 为 true，那么就是第一种情况下，刻度显示出来
   c. 设置了 step 和 marks，那么滑动条会有隐藏的刻度，以及显示的 marks，然后每次拖动会拖到隐藏的刻度和显示的 marks 上
   d. 只设置了 marks，那么滑动条会有显示的 marks，然后每次拖动只能拖到显示的 marks 上
   c. 设置了 step 和 marks，然后 ticksVisible 为 true，那么滑动条会有显示的刻度和 marks，然后每次拖动会拖到刻度和 marks 上

5. 按 4 来描述，step 需要大于 0，且能被 [min, max] 整除。

[imguolao]

1. 可以看下是不是需要加一个 start 事件, 即开始拖拽时触发的事件

这个有什么使用场景吗？感觉有 input 就够了吧

我们这个组件是鼠标拖拽类型的, 既然有了松开鼠标后触发的事件, 加一个鼠标开始的时候触发的事件我觉得是自然的, 就像 DOM 里面鼠标的事件是成双成对的一样, 可以考虑命名为 start, change 和 end

可能考虑的角度不一样，只关注值的变化，那么在 vue 有响应式的情况下，只需要提供 change 和 input 就可以了；如果从鼠标拖拽事件来看，那应该是提供 dragStart、drag、dragEnd 这三个事件；我觉得 slider 作为一个滑动输入组件，更应该关心 value 的变化，而不是拖动的过程，你们觉得呢？

[danranVm]

1. 双滑块即可
2. 假设我的 step 为 1， ticksVisible 为 true, 那你岂不是要显示100个刻度。。。还是不要吧。

[danranVm]

1. 可以看下是不是需要加一个 start 事件, 即开始拖拽时触发的事件

这个有什么使用场景吗？感觉有 input 就够了吧

我们这个组件是鼠标拖拽类型的, 既然有了松开鼠标后触发的事件, 加一个鼠标开始的时候触发的事件我觉得是自然的, 就像 DOM 里面鼠标的事件是成双成对的一样, 可以考虑命名为 start, change 和 end

可能考虑的角度不一样，只关注值的变化，那么在 vue 有响应式的情况下，只需要提供 change 和 input 就可以了；如果从鼠标拖拽事件来看，那应该是提供 dragStart、drag、dragEnd 这三个事件；我觉得 slider 作为一个滑动输入组件，更应该关心 value 的变化，而不是拖动的过程，你们觉得呢？

对于这个，我觉得你们说的都有道理。。。我保持中立。:cry:

[imguolao]

1. 双滑块即可
2. 假设我的 step 为 1， ticksVisible 为 true, 那你岂不是要显示100个刻度。。。还是不要吧。

如果设置了 step 为 1，然后范围为 [0, 100]，那每次拖动只能拖 1 个长度，要拖 100 次才能拖到 max，没有人会这样用吧。
如果 step 为 1，然后范围为 [0, 10]，拖 10 次就到 max，那么刻度也只有 0 到 10 之间的 9 个刻度，这个看使用者怎么想了。

[imguolao]

从上面描述来看，是不是加一个变量来设置是否只能拖拽到刻度上会合理一点？

[zymoplastic]

1. 可以看下是不是需要加一个 start 事件, 即开始拖拽时触发的事件

这个有什么使用场景吗？感觉有 input 就够了吧

我们这个组件是鼠标拖拽类型的, 既然有了松开鼠标后触发的事件, 加一个鼠标开始的时候触发的事件我觉得是自然的, 就像 DOM 里面鼠标的事件是成双成对的一样, 可以考虑命名为 start, change 和 end

可能考虑的角度不一样，只关注值的变化，那么在 vue 有响应式的情况下，只需要提供 change 和 input 就可以了；如果从鼠标拖拽事件来看，那应该是提供 dragStart、drag、dragEnd 这三个事件；我觉得 slider 作为一个滑动输入组件，更应该关心 value 的变化，而不是拖动的过程，你们觉得呢？

start, change, end 也是针对值的:

start: 滑块移动开始时的 value
change: 使用鼠标拖曳时，拖拽过程中实时触发的 value 的更新
end: 滑块移动结束时的 value

你的 input 就是我这里的 change, 你的 change 就是我这里的 end, 我的想法就是既然有了 end, 我觉得可以加一个 start

[danranVm]

1. 双滑块即可
2. 假设我的 step 为 1， ticksVisible 为 true, 那你岂不是要显示100个刻度。。。还是不要吧。

如果设置了 step 为 1，然后范围为 [0, 100]，那每次拖动只能拖 1 个长度，要拖 100 次才能拖到 max，没有人会这样用吧。
如果 step 为 1，然后范围为 [0, 10]，拖 10 次就到 max，那么刻度也只有 0 到 10 之间的 9 个刻度，这个看使用者怎么想了。

我认为 ticksVisible 的意义不大，有 marks 配置就够了。
step = 0 时只允许拖拽到刻度上，或者新增一个 props 来控制仅允许拖拽到刻度上都行。

[imguolao]

1. 可以看下是不是需要加一个 start 事件, 即开始拖拽时触发的事件

这个有什么使用场景吗？感觉有 input 就够了吧

我们这个组件是鼠标拖拽类型的, 既然有了松开鼠标后触发的事件, 加一个鼠标开始的时候触发的事件我觉得是自然的, 就像 DOM 里面鼠标的事件是成双成对的一样, 可以考虑命名为 start, change 和 end

可能考虑的角度不一样，只关注值的变化，那么在 vue 有响应式的情况下，只需要提供 change 和 input 就可以了；如果从鼠标拖拽事件来看，那应该是提供 dragStart、drag、dragEnd 这三个事件；我觉得 slider 作为一个滑动输入组件，更应该关心 value 的变化，而不是拖动的过程，你们觉得呢？

start, change, end 也是针对值的:

start: 滑块移动开始时的 value
change: 使用鼠标拖曳时，拖拽过程中实时触发的 value 的更新
end: 滑块移动结束时的 value

你的 input 就是我这里的 change, 你的 change 就是我这里的 end, 我的想法就是既然有了 end, 我觉得可以加一个 start

这样可能会变得有些复杂

1. slider 是可以点击滑动条选值的，既然加了滑块的 move event, 那鼠标的 down、up 要不要也加上？
2. slider 作为一个数据输入组件，change 的语义很奇怪，就像 react 的合成事件用 change 代替了 input，违背了 html 中 input 作为输入中触发的语义。
3. 把 slider 作为一个输入框，那么只需要关注输入中，输入后的值，在 vue 里面要拿到输入前的值非常简单。

event 变更为：

1. start (value) => void 滑块移动开始时触发
2. end (value) => void 滑块移动结束时触发
3. input (value) => void 当 slider 的值发生改变时触发（滑块移动中触发）

有没有必要添加 focus, blur 这两个焦点事件？

[imguolao]

1. 双滑块即可
2. 假设我的 step 为 1， ticksVisible 为 true, 那你岂不是要显示100个刻度。。。还是不要吧。

如果设置了 step 为 1，然后范围为 [0, 100]，那每次拖动只能拖 1 个长度，要拖 100 次才能拖到 max，没有人会这样用吧。
如果 step 为 1，然后范围为 [0, 10]，拖 10 次就到 max，那么刻度也只有 0 到 10 之间的 9 个刻度，这个看使用者怎么想了。

我认为 ticksVisible 的意义不大，有 marks 配置就够了。
step = 0 时只允许拖拽到刻度上，或者新增一个 props 来控制仅允许拖拽到刻度上都行。

step 为 0 就没有刻度啦，marks 是标记，标记和刻度不一样。

1. props 去掉 ticksVisible，slider 始终不显示刻度
2. props 新增 dotStop，会有以下几种情况出现：
   a. 只设置了 step，那么滑动条会有隐藏的刻度，然后每次拖动只能拖到隐藏刻度上
   b. 设置了 step 和 marks，那么滑动条会有隐藏的刻度，以及显示的 marks，然后每次拖动会拖到隐藏的刻度和显示的 marks 上
   c. 只设置了 marks，那么滑动条会有显示的 marks，然后每次拖动只能拖到显示的 marks 上
   d. 设置了 step 和 marks，然后 dotStop 为 true，那么滑动条会有显示的 marks，step 无效，平滑拖动

[danranVm]

@imguolao

• 按照在 DIM 群里讨论的吧，保留 input 和 change 即可。
• 去掉 ticksVisible ，新增 dotStop
• 另外需要实现 control 的 props，参考 [comp: form]: api design of all form components #153 ，和 input 组件。