滑块

滑块允许用户在一个范围内选择一个或多个值。

安装

npx nextui-cli@latest add slider

以上命令仅用于单个安装。如果 @nextui-org/react 已经全局安装，您可以跳过此步骤。

导入

用法

禁用

尺寸

圆角

颜色

垂直滑块

可以使用 orientation="vertical" 属性更改滑块的方向。

带可见步骤

可以使用 showSteps 属性在每个步骤上显示小圆点。

带标记

可以使用 marks 属性在每个步骤上显示标签。

范围滑块

如果将值数组传递给 value 属性或 defaultValue 属性，滑块将变为范围滑块。

填充偏移量

The fillOffset 属性允许您设置填充的起始位置。

带有工具提示

The showTooltip 属性允许您在用户悬停或拖动滑块时显示一个包含当前滑块值的工具提示。

注意: 您可以通过将 tooltipProps 传递给 Slider 组件来更改任何工具提示属性。

带有轮廓

可以通过传递 showOutline 属性，在滑块的滑块上添加一个小轮廓。

开始和结束内容

滑块组件提供 startContent 和 endContent 属性，允许您将任何 ReactNode 添加到滑块的开头和结尾。

值格式化

默认情况下，值以百分比格式化，但可以使用 formatOptions 属性指定不同的格式来修改此行为。 formatOptions 与 Intl.NumberFormat 的 option 参数兼容，并根据当前区域设置应用。

注意： 使用 tooltipValueFormatOptions 属性来格式化工具提示值。

也可以使用 getValue 属性来格式化值。

隐藏值

滑块值默认显示，但可以通过传递 hideValue 属性来隐藏。

隐藏滑块按钮

滑块按钮默认显示，但可以通过传递 hideThumb 属性来隐藏。

受控

您可以通过传递 value 和 onChange 属性来控制滑块。

如果您只想在用户停止拖动滑块时捕获滑块值，可以使用 onChangeEnd 属性。

受控范围

您也可以使用 value 和 onChange 属性中的值数组来控制范围滑块。

自定义滑块

Slider 组件提供了一个 renderThumb 属性，允许您以任何您想要的方式自定义滑块。

自定义范围滑块

您也可以使用 renderThumb 属性来自定义范围滑块的滑块。 index 属性将告诉您正在渲染哪个滑块。

自定义标签

Slider 组件提供了一个 renderLabel 属性，允许您以任何您想要的方式自定义标签。

自定义值

Slider 组件提供了一个 renderValue 属性，允许您自定义值标签元素。

禁用滑块缩放

如果您想禁用滑块缩放动画，可以传递 disableThumbScale 属性。

插槽

• base: 基础插槽，包含所有其他插槽和元素。它充当主要容器。
• labelWrapper: Slider 标签和值的容器。它对齐这些元素并确保一致的布局。
• label: 用于显示 Slider 标签的专用插槽。
• value: 显示 Slider 的当前值。位于 labelWrapper 内。
• step: 代表 Slider 上的单个步骤或间隔。
• mark: 表示 Slider 上的特定值或间隔。
• trackWrapper: Slider 轨道容器，确保其始终对齐和定位。
• track: Slider 的基础条，滑块沿其移动。
• 填充器: 一个视觉表示，显示所选值，从起点到当前滑块位置填充轨道。
• 滑块: 用户在轨道上拖动以选择滑块上的值的交互式元素。
• startContent: 用于在滑块开头添加额外内容或图标的插槽。
• endContent: 用于在滑块末尾添加额外内容或图标的插槽。

自定义样式

您可以通过将自定义 Tailwind CSS 类传递给组件插槽来定制 Slider 组件。

数据属性

Slider 具有以下属性

• data-hover: 当滑块被悬停时。基于 useHover
• data-orientation: 滑块的方向。基于 orientation 属性。

滑块 具有以下属性，这些属性由 renderThumb 属性返回

• data-dragging: 当滑块被拖动时。
• data-focus-visible: 当滑块获得焦点时。基于 useFocusVisible
• data-hover: 当鼠标悬停在滑块上时。基于 useHover
• data-pressed: 当按下滑块时。基于 usePress

无障碍性

• 支持一个或多个滑块。
• 通过 useMove 钩子支持鼠标、触摸和键盘。
• 支持多点触控，可以同时拖动多个滑块或多个拇指。
• 在轨道上按下会将最近的拇指移动到该位置。
• 支持使用箭头键，以及 Page Up/Down、Home 和 End 键。
• 支持水平和垂直方向。
• 支持自定义最小值、最大值和步长值，并处理舍入误差。
• 支持禁用整个滑块或单个拇指。
• 拖动时防止文本选择。
• 通过 ARIA 暴露给辅助技术，作为一组滑块元素。
• 滑块拇指使用隐藏的原生输入元素来支持触屏阅读器。
• 支持为整个滑块和单个拇指添加标签。
• 支持使用 <output> 元素显示当前拇指值。
• 国际化的数字格式，可以是百分比或值。
• 支持在 RTL 本地化中镜像。

API

滑块属性

滑块函数

滑块事件

类型

滑块值

export type SliderValue = number | number[];

滑块刻度

export type SliderStepMarks = {
  value: number;
  label: string;
}[];