Slider

import {Slider} from '@gravity-ui/uikit';

滑块是一个可自定义的响应式 React 组件，允许用户从指定的数据集中选择单个值或一系列值。

§滑块变体

§单滑块

这是一个带有一个手柄的滑块，用于选择单个值。默认情况下使用它。

<Slider />

§范围滑块

这是带有两个手柄的滑块，用于选择范围。要使用它，请为数组设置 defaultValue （对于不受控制的滑块）或 value （对于受控滑块）。

<Slider defaultValue={[20, 40]} />

§国家

§已禁用

这是一种 Slider 您不想允许用户使用此组件的状态。

<Slider disabled={true} />

§错误

此 Slider 状态适用于不正确的用户输入。要更改外 Slider 观，请使用带有 "invalid" 值的 validationState 属性。或者，您可以通过该 errorMessage 属性提供错误消息。此消息文本将在滑块下方显示。

<Slider validationState={"invalid"} />
<Slider validationState={"invalid"} errorMessage="Error message" />

§大小

使用该 size 属性来管理大 Slider 小。默认大小为 m。

<Slider size="s" />
<Slider size="m" />
<Slider size="l" />
<Slider size="xl" />

§价值

§最小值和最大值

min 和 max 属性定义了 Slider 可以处理的范围的限制。这些属性对于设置可选值的边界至关重要。

<Slider min={10} />
<Slider max={50} />
<Slider min={20} max={60} />

§步骤

该 step 属性确定最小值和最大值范围内的增量。这意味着滑块移动一次，该值会发生多大变化。

<Slider step={10} />

§标记

Slider 组件中使用该 marks 属性来指定滑块上的视觉标记，这有助于指示最小值和最大值之间的各个点。此属性增强了滑块的可用性和可视界面，尤其是在表示特定间隔时。默认情况下，它是 2（min 和 max 值）。您可以通过两种不同的方式使用它：

• 滑块上可视标记的数量

<Slider marks={11} />

• 滑块沿线的标记值数组

<Slider marks={[0, 50, 100]} />

0 或者 marks 属性中的空数组 [] 值隐藏所有标记 Slider。

<Slider marks={0} />

标记值可供选择，即使它与 step 值条件不匹配

您可以使用 marksFormat 属性更改标记值的显示格式。

§定义可用值

您可以将 step 属性设置为， null 以定义滑块可以处理的一组特定值，而不是连续范围。当只有特定的离散值可供选择时，这尤其有用。在这种情况下，属性 min ， max 并 marks 允许指定一个数字数组，表示允许用户使用选择的确切值 Slider。

<Slider marks={[10, 20, 50, 55, 65, 80]} step={null}/>

§工具提示

该 tooltipDisplay 属性在 Slider 组件中用于控制工具提示的显示行为，该工具提示在用户与滑块交互时显示当前值。 auto 该值仅在 “ Slider的句柄被光标悬停或聚焦” 时才显示工具提示。

<Slider tooltipDisplay="on" />

您可以使用 tooltipFormat 属性更改工具提示值的显示格式。如果您未指定 tooltipformat ，则将用于 marksFormat 在工具提示中显示该值。

§属性