数值滑块

介绍

数值滑块（Value Slider）是一个滑块类的高阶组件，它提供了一种自定义滑块标签和图像的方式，与 标签滑块（Label Slider） 非常相似，只是它只有一个标签（显示 “数值”）跟随滑块的刻度，而不是每个刻度都有一个标签。

数值滑块包含以下被包裹的小部件：

• 容器（x1）：为高阶组件（HoC）提供背景
• 图像（x3）：为各种状态提供图像
• 标签（x3）：为各种状态提供标签
• 滑块（x1）：提供交互行为

数值滑块具有以下属性：

• 状态（States）

  配置高阶组件拥有多少种状态，并且每种状态最多有：

  • 最多 3 张可配置的图像
  • 最多 3 张可配置的标签

• 当前状态（Current state）

  高阶组件的当前状态，你可以更改它以查看高阶组件是如何变化的

滑块标签

类似 标签滑块，数值滑块 中位于滑块旁边的标签是滑块标签，滑块标签的位置是自动计算的，以与滑块的当前刻度保持一致。所以，你无法配置滑块标签的位置。

编辑数值滑块

默认情况下，数值滑块 会显示两张图像和一个滑块标签。如果你想显示更多的图像和标签，可以右键单击高阶组件并选择 “编辑”，进入高阶组件编辑器来更改默认配置。

数值滑块 的编辑就如同 标签滑块 那样。