滑块

滑块是一种 UI 元素，允许用户沿条形选择单个值或值范围。

简介

滑块组件允许用户从水平或垂直条上的值范围中进行选择。

滑块非常适合从可调节内容的视觉表示中获益的界面控件，例如音量或亮度设置，或用于应用图像滤镜，例如渐变或饱和度。

组件

import { Slider } from '@mui/base/Slider';

结构

滑块组件由一个根 <span> 组成，其中包含几个内部 <span> 元素

• rail：滑块的完整长度
• track：滑块的活动部分
• thumb：用户在滑块上移动的按钮
• mark：轨道上可选的预定义停止点
• markLabel：可选标签，用于显示标记的值
• valueLabel：可选标签，用于在范围滑块上显示值

<span class="base-Slider-root">
  <span class="base-Slider-rail"></span>
  <span class="base-Slider-track"></span>
  <span
    data-index="0"
    class="base-Slider-mark base-Slider-markActive"
    style="left: 0%;"
  ></span>
  <span
    aria-hidden="true"
    data-index="0"
    class="base-Slider-markLabel base-Slider-markLabelActive"
    style="left: 0%;"
    >0</span
  >
  <span data-index="1" class="base-Slider-mark" style="left: 50%;"></span>
  <span
    aria-hidden="true"
    data-index="1"
    class="base-Slider-markLabel"
    style="left: 50%;"
    >50</span
  >
  <span data-index="2" class="base-Slider-mark" style="left: 100%;"></span>
  <span
    aria-hidden="true"
    data-index="2"
    class="base-Slider-markLabel"
    style="left: 100%;"
    >100</span
  >
  <span class="base-Slider-thumb">
    <input />
  </span>
</span>

自定义结构

使用 slots prop 覆盖根元素或任何其他内部插槽

<Slider slots={{ root: 'div', thumb: 'div' }} />

使用 slotProps prop 将自定义 props 传递给内部插槽。以下代码片段将名为 my-rail 的 CSS 类应用于 rail 插槽

<Slider slotProps={{ rail: { className: 'my-rail' } }} />

TypeScript 的用法

在 TypeScript 中，您可以将 slots.root 中使用的自定义组件类型指定为非样式化组件的泛型参数。这样，您可以安全地直接在组件上提供自定义根元素的 props

<Slider<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />

这同样适用于特定于自定义原始元素的 props

<Slider<'input'> slots={{ root: 'input' }} autoFocus={true} />

Hook

import { useSlider } from '@mui/base/useSlider';

useSlider hook 允许您将滑块的功能应用于完全自定义的组件。它返回要放置在自定义组件上的 props，以及表示组件内部状态的字段。

Hooks 不支持插槽 props，但它们支持自定义 props。

自定义

垂直

滑块组件可以垂直和水平排列。

垂直方向时，您必须在滑块上设置 orientation="vertical"，以便用户可以使用向上和向下箭头键进行导航（而不是水平滑块的默认从左到右行为）。

离散滑块

最基本的滑块是连续的，这意味着它没有用户可以从中选择的预定义（离散）值。这适用于近似值对用户来说足够好的情况，例如亮度或音量。

但是，如果您的用户需要更精确的选项，您可以创建一个离散滑块，将滑块滑块捕捉到沿条形的预定义停止点。确保将 shiftStep prop（使用 Page Up/Down 或 Shift + Arrow Up/Down 时滑块可以步进的粒度）调整为可被 step 整除的值。

要为每个停止点生成标记，请使用 marks={true}

自定义标记

您可以通过向 marks prop 提供丰富的数组来创建自定义标记

限制值

如果用户应该只能从 marks prop 提供的值中选择，请添加 step={null} 以禁用所有其他选项

范围滑块

要让用户在滑块上设置范围的开始和结束，请将值数组提供给 value 或 defaultValue prop

值标签

可以通过使用带有 valueLabel 插槽的可选 slots prop 在滑块滑块周围渲染值标签。以下是显示值标签的典型用例

• 始终显示
• 仅当鼠标悬停在滑块滑块上时（使用 CSS）
• 在与滑块滑块交互时（悬停或拖动）

以下演示展示了当鼠标悬停在滑块滑块上时如何渲染值标签

可访问性

有关可访问性最佳实践的完整详细信息，请参阅 WAI-ARIA 滑块（多滑块）模式指南。

该组件处理了使其可访问的大部分必要工作。但是，您需要确保

• 每个滑块滑块都有一个用户友好的标签（aria-label、aria-labelledby 或 getAriaLabel prop）。
• 每个滑块滑块都有一个用户友好的文本，用于描述其当前值。如果该值与标签的语义匹配，则不需要这样做。您可以使用 getAriaValueText 或 aria-valuetext prop 更改名称。