滑块

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

安装

上述命令仅用于单独安装。如果 @heroui/react 已全局安装，则可以跳过此步骤。

导入

用法

禁用

尺寸

圆角

颜色

垂直滑块

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

显示步骤

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

显示标记

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

范围滑块

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

填充偏移

fillOffset 属性允许您设置填充应从哪里开始。

带有提示

当用户悬停或拖动滑块时，showTooltip 属性允许您显示带有当前滑块值的提示。

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

带有轮廓

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

起始和结束内容

滑块组件提供了 startContent 和 endContent 属性，允许您在滑块的起始和结束位置添加任何 ReactNode。

值格式化

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

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

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

隐藏值

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

隐藏滑块拇指

滑块拇指默认显示，但可以通过传递 hideThumb prop 来隐藏。

受控

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

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

受控范围

您还可以通过在 value 和 onChange props 中使用值数组来控制范围滑块。

自定义拇指

Slider 组件提供了一个 renderThumb prop，允许您以任何您想要的方式自定义拇指。

自定义范围拇指

您还可以使用 renderThumb prop 来自定义范围滑块的拇指。index prop 将告诉您正在渲染哪个拇指。

自定义标签

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

自定义值

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

禁用拇指缩放

如果您想禁用拇指缩放动画，可以传递 disableThumbScale prop。

插槽

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

自定义样式

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

数据属性

Slider 具有以下属性

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

Thumbs 具有以下属性，这些属性由 renderThumb prop 返回

• data-dragging: 当拇指正在被拖动时。
• data-focus-visible: 当拇指被聚焦时。基于 useFocusVisible
• data-hover: 当拇指被悬停时。基于 useHover
• data-pressed: 当拇指被按下时。基于 usePress

无障碍性

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

API

Slider Props

Slider Functions

Slider Events

Types

Slider Value

Slider Step Marks