Slider

• 介绍
• 基本示例
• 原生属性
  • 键盘修饰键
  • 键盘数字输入
• 多值
• 自定义句柄
• 自定义工具提示
  • 工具提示可见性
  • 工具提示格式化
• 关联数字输入
  • 关联输入属性
• 刻度
  • 基本用法
  • 带标签
  • 自定义刻度
  • 对准标记
  • 标记样式
• 缩放滑块值
  • 使用函数
  • 使用区间
• 图表
• 全功能示例
• 属性 & 特性
• 章节
• 无障碍性
  • 键盘交互

介绍

slider 输入是原生 HTML range 输入的高级且高度可配置的版本。与标准的 range 输入相比，一些值得注意的新增功能包括：

• 支持多值输入。
• 显示工具提示以显示选定的值。
• 显示用于最小值和最大值的关联输入。
• 为值步骤渲染刻度标记。
• 添加任意刻度标记。
• 强制选择对准刻度标记。
• 渲染与选择值关联的条形图数据。

基本示例

原生属性

如果您熟悉使用原生 HTML range 输入，您会发现许多您熟悉的现有属性在 slider 输入中按预期工作。

键盘修饰键

即使是在其最简单的形式中，slider 输入也有一些小技巧。就像原生的 range 输入一样，当它被聚焦时，您可以使用箭头键来调整输入值 — 但是使用 slider 输入时，您可以按住 shift 键以 10 倍的增量调整，以及使用系统的修饰键（command 或 ctrl）跳转到最小值/最大值。

键盘数字输入

每当您在 slider 输入上聚焦一个句柄时，您可以在键盘上输入一个值，经过短暂的防抖后，您的 slider 句柄将被设置为您提供的值 — 或最接近的可用匹配值。

多值

要在 slider 输入上渲染两个值句柄，请为输入的值提供一个数组。控制句柄可以互相拖动，您的结果数组值将始终按从最小到最大的顺序返回排序。

自定义句柄

使用 maxHandleInner（默认）和 minHandleInner 插槽，您可以自定义 slider 句柄的外观。maxHandleInner 插槽用于单值 slider 输入。

自定义工具提示

工具提示可见性

默认情况下，当选择句柄被拖动时，slider 工具提示在悬停时显示。您可以通过使用 tooltip 属性并提供一个布尔值，强制工具提示进入开启或关闭状态。

工具提示格式化

通过向 tooltip-format 属性提供一个函数，你可以自定义 slider 工具提示的值。你的 tooltip-format 函数将提供两个参数：

value：默认情况下将在工具提示中显示的当前值。 handle：受函数影响的当前句柄。可以是 min 或 max。

通过使用 tooltip-format 属性，你可以为你的 slider 输入引入多样性 — 尤其是当与 FormKit 的 section-key 类属性系统 结合使用时。

关联数字输入

有时，如果用户还能够在关联字段中直接输入数字值，范围式输入对用户来说更有用。你可以通过将 show-input 属性设置为 true 来显示绑定到 slider 范围句柄值的 number 输入。

关联输入属性

关联的 number 输入是 FormKit 输入。你可以使用提供的属性对它们应用属性：

• input-attrs：将你提供的对象绑定到 min 和 max 输入上。
• min-input-attrs：对象绑定到关联的 min 输入上。
• max-input-attrs：对象绑定到关联的 max 输入上。

刻度

基本用法

slider 输入支持在输入轨道上渲染刻度。通过将 marks 属性设置为 true，刻度将在每个 steps 间隔处渲染。

带标签

你可以通过将 mark-labels 属性设置为 true 来为你的刻度启用标签。

自定义刻度

通过向 marks 属性提供一个对象数组而不是布尔值，你可以在滑块的轨道上放置任意刻度。刻度对象应具有以下属性：

• at：刻度应渲染的轨道上的位置（值）。
• label：如果启用了 mark-labels 属性，则为刻度渲染的标签。
• class：应用于刻度元素的一串类。
• labelClasses：应用于刻度标签元素的一串类。

对准标记

当提供自定义标记时，您可能希望选择自动对准所提供的标记。这可以通过 snap-to-marks 属性来实现。当 snap-to-marks 为 true 时，键盘事件将跳转到最近的标记，通过键盘或关联输入输入的值将对准最近的可用标记。

标记样式

您可以通过在标记对象上使用 class 和 labelClasses 属性，为您的标记和标记标签应用自定义类。

缩放滑块值

默认情况下，slider 输入在其整个范围内线性缩放值。然而，您可以使用提供的 scaling-function 或 intervals 属性来改变这种行为。

使用函数

scaling-function 属性接受 3 个值：

• 字符串 linear — 这是默认行为
• 字符串 log 将应用对数缩放函数到您的 slider
• 一个包含两个名为 forward 和 reverse 的函数的对象，将应用您自己的缩放逻辑。

使用区间

intervals 属性接受一个对象数组，每个对象定义了 slider 上的一个区间范围。每个对象包含：

• value：区间开始的 slider 上的点
• step：区间内应使用的步长大小

您的最后一个区间将覆盖从您指定的 value 到 slider 的 max 属性值的范围。如果您的最低区间不是从 slider 的最小可能值开始，则将为您创建一个区间，覆盖从 slider 的 min 属性到您的第一个区间的范围。其 step 值将是您的 slider 输入上的 step 属性值。

重要的是要注意，在 slider 轨道上区间的视觉表示是基于给定区间内可能步数的总数，而不是区间的原始数值。

图表

您可以通过向 chart 属性提供一个数组，在滑块上方渲染一个条形图，该数组具有任意值。chart 数组的结构类似于 marks 数组。每个嵌套对象应包含：

• at：轨道上应渲染图表条形的位置（值）。
• value：一个数值，将用于计算图表中条形的相对高度。

slider 输入将遍历您的 chart 数组，并确定数组中包含的最大 value，然后将所有其他值除以该最大值，以确定渲染图表条形的相对高度。

全功能示例

通过组合 slider 组件提供的属性，您可以创建一个强大的输入工具，以覆盖多种用例。这里是一个价格范围滑块的示例。

属性 & 特性

章节

您可以通过使用该部分的"key"来定位输入的特定部分，从而可以修改该部分的类、HTML（通过:sections-schema）或内容（通过插槽)）。了解更多关于部分的信息，请点击这里。

无障碍性

所有 FormKit 输入都是考虑到以下无障碍性因素而设计的。通过在此处提交无障碍性问题，帮助我们不断改进所有人的无障碍性：

键盘交互