ctrlk

使用

提供了两个滑块组件: Slider和RangeSlider

  • Slider 单个滑点, value为单值.
  • RangeSlider 双滑点, value为元组(有且仅有两个元素的数组), 表示范围的两个边界值.

基本

35
35
65

受控和非受控属性

和React原生的<input>组件一样, defaultValue为非受控属性,value为受控属性.

onChange和onChangeEnd

onChange是在滑动过程中触发, 而onChangeEnd是在滑动结束(如用户释放鼠标时)触发.

35
onChange value: 35onChangeEnd value: 35

Marks

Marks是在轨道上定义标记, 标记由标记点和标记文本组成. Marks是一个对象数组: {value: number; label?: string;}[]

其中: value在轨道上显示标记点; label是可选的, 如果定义则会在标记点下方显示文本.

35
45
20%
50%
80%
35
65
45
75
20%
50%
80%

Label

Label是当前值的文本表示, 它会显示在滑点的上方.

Label可以是文本也可以是函数(参数为当前值). 函数形式更为有用.

no label
custom label
35 °C
35 °C
65 °C
always visible
35 °C
35 °C
65 °C
label transition
35 °C
35 °C
65 °C

默认为当鼠标覆盖显示Label, 可以设置labelAlwaysOn为true使label常常显示.
如果想完全不显示, 可以设置label为null

样式槽

35
65
20%
50%
80%

可以通过样式槽自定义各组件的样式:

35
20%
50%
80%
35
65
20%
50%
80%

如果只想修改bar的颜色, 可以简单的通过color属性设置.

35
35
65

disabled

35
35
65

反转

inverted属性用于反转, 但值并未不会改变, 具体的意义需要由应用程序处理.

35
35
65

键盘支持

当Slider获得焦点后就可以通过键盘进行操作.

键盘键描述
ArrowRight/ArrowUp增加一步
ArrowLeft/ArrowDown减少一步
Home滑到最小值, 仅Silder支持, RangeSlider不支持
End滑到最大值, 仅Silder支持, RangeSlider不支持
RTD UIv6.1.0