滑块

滑块允许用户从一系列值中进行选择。

滑块沿条形反映一系列值，用户可以从中选择单个值。它们非常适合调整音量、亮度或应用图像滤镜等设置。

连续滑块

连续滑块允许用户在主观范围内选择一个值。

<Stack spacing={2} direction="row" sx={{ alignItems: 'center', mb: 1 }}>
  <VolumeDown />
  <Slider aria-label="Volume" value={value} onChange={handleChange} />
  <VolumeUp />
</Stack>
<Slider disabled defaultValue={30} aria-label="Disabled slider" />

<Stack spacing={2} direction="row" sx={{ alignItems: 'center', mb: 1 }}>
  <VolumeDown />
  <Slider aria-label="Volume" value={value} onChange={handleChange} />
  <VolumeUp />
</Stack>
<Slider disabled defaultValue={30} aria-label="Disabled slider" />

按 Enter 键开始编辑

尺寸

对于较小的滑块，请使用属性 size="small"。

<Slider
  size="small"
  defaultValue={70}
  aria-label="Small"
  valueLabelDisplay="auto"
/>
<Slider defaultValue={50} aria-label="Default" valueLabelDisplay="auto" />

<Slider
  size="small"
  defaultValue={70}
  aria-label="Small"
  valueLabelDisplay="auto"
/>
<Slider defaultValue={50} aria-label="Default" valueLabelDisplay="auto" />

按 Enter 键开始编辑

离散滑块

离散滑块可以通过参考其值指示器调整到特定值。您可以使用 marks={true} 为每个步骤生成标记。

<Slider
  aria-label="Temperature"
  defaultValue={30}
  getAriaValueText={valuetext}
  valueLabelDisplay="auto"
  shiftStep={30}
  step={10}
  marks
  min={10}
  max={110}
/>
<Slider defaultValue={30} step={10} marks min={10} max={110} disabled />

<Slider
  aria-label="Temperature"
  defaultValue={30}
  getAriaValueText={valuetext}
  valueLabelDisplay="auto"
  shiftStep={30}
  step={10}
  marks
  min={10}
  max={110}
/>
<Slider defaultValue={30} step={10} marks min={10} max={110} disabled />

按 Enter 键开始编辑

小步长

您可以更改默认的步长增量。请确保将 shiftStep 属性（使用 Page Up/Down 或 Shift + 向上/向下箭头时滑块可以步进的粒度）调整为可被 step 整除的值。

<Slider
  aria-label="Small steps"
  defaultValue={0.00000005}
  getAriaValueText={valuetext}
  step={0.00000001}
  marks
  min={-0.00000005}
  max={0.0000001}
  valueLabelDisplay="auto"
/>

<Slider
  aria-label="Small steps"
  defaultValue={0.00000005}
  getAriaValueText={valuetext}
  step={0.00000001}
  marks
  min={-0.00000005}
  max={0.0000001}
  valueLabelDisplay="auto"
/>

按 Enter 键开始编辑

自定义标记

您可以通过为 marks 属性提供丰富的数组来拥有自定义标记。

<Slider
  aria-label="Custom marks"
  defaultValue={20}
  getAriaValueText={valuetext}
  step={10}
  valueLabelDisplay="auto"
  marks={marks}
/>

<Slider
  aria-label="Custom marks"
  defaultValue={20}
  getAriaValueText={valuetext}
  step={10}
  valueLabelDisplay="auto"
  marks={marks}
/>

按 Enter 键开始编辑

限制值

您可以使用 step={null} 将可选择的值限制为 marks 属性提供的那些值。

<Slider
  aria-label="Restricted values"
  defaultValue={20}
  getAriaValueText={valuetext}
  step={null}
  valueLabelDisplay="auto"
  marks={marks}
/>

<Slider
  aria-label="Restricted values"
  defaultValue={20}
  getAriaValueText={valuetext}
  step={null}
  valueLabelDisplay="auto"
  marks={marks}
/>

按 Enter 键开始编辑

标签始终可见

您可以使用 valueLabelDisplay="on" 强制拇指标签始终可见。

<Slider
  aria-label="Always visible"
  defaultValue={80}
  getAriaValueText={valuetext}
  step={10}
  marks={marks}
  valueLabelDisplay="on"
/>

<Slider
  aria-label="Always visible"
  defaultValue={80}
  getAriaValueText={valuetext}
  step={10}
  marks={marks}
  valueLabelDisplay="on"
/>

按 Enter 键开始编辑

范围滑块

滑块可用于通过向 value 属性提供值数组来设置范围的开始和结束。

<Slider
  getAriaLabel={() => 'Temperature range'}
  value={value}
  onChange={handleChange}
  valueLabelDisplay="auto"
  getAriaValueText={valuetext}
/>

<Slider
  getAriaLabel={() => 'Temperature range'}
  value={value}
  onChange={handleChange}
  valueLabelDisplay="auto"
  getAriaValueText={valuetext}
/>

按 Enter 键开始编辑

最小距离

您可以在 onChange 事件处理程序中强制执行值之间的最小距离。默认情况下，当您在拖动另一个拇指时将指针移动到拇指上方时，活动拇指将切换到悬停的拇指。您可以使用 disableSwap 属性禁用此行为。如果您希望范围在达到最小距离时移动，则可以使用 onChange 中的 activeThumb 参数。

<Slider
  getAriaLabel={() => 'Minimum distance'}
  value={value1}
  onChange={handleChange1}
  valueLabelDisplay="auto"
  getAriaValueText={valuetext}
  disableSwap
/>
<Slider
  getAriaLabel={() => 'Minimum distance shift'}
  value={value2}
  onChange={handleChange2}
  valueLabelDisplay="auto"
  getAriaValueText={valuetext}
  disableSwap
/>

<Slider
  getAriaLabel={() => 'Minimum distance'}
  value={value1}
  onChange={handleChange1}
  valueLabelDisplay="auto"
  getAriaValueText={valuetext}
  disableSwap
/>
<Slider
  getAriaLabel={() => 'Minimum distance shift'}
  value={value2}
  onChange={handleChange2}
  valueLabelDisplay="auto"
  getAriaValueText={valuetext}
  disableSwap
/>

按 Enter 键开始编辑

带输入字段的滑块

在此示例中，输入允许设置离散值。

音量

颜色

<Slider
  aria-label="Temperature"
  defaultValue={30}
  getAriaValueText={valuetext}
  color="secondary"
/>

<Slider
  aria-label="Temperature"
  defaultValue={30}
  getAriaValueText={valuetext}
  color="secondary"
/>

按 Enter 键开始编辑

自定义

这里有一些自定义组件的示例。您可以在覆盖文档页面中了解更多相关信息。

iOS

pretto.fr

工具提示值标签

Airbnb

音乐播放器

Jun Pulse

คนเก่าเขาทำไว้ดี (Can't win)

Chilling Sunday — คนเก่าเขาทำไว้ดี

0:32

-2:48

垂直滑块

将 orientation 属性设置为 "vertical" 以创建垂直滑块。拇指将跟踪垂直运动而不是水平运动。

124 以下的 Chrome 版本对于垂直滑块错误地实现了 aria-orientation，并在可访问性树中将其公开为 'horizontal'。（Chromium issue #40736841）

-webkit-appearance: slider-vertical CSS 属性可用于纠正这些旧版本的问题，但代价是在较新的 Chrome 版本中引起控制台警告

.MuiSlider-thumb input {
  -webkit-appearance: slider-vertical;
}

标记位置

您可以通过添加和重新定位最小值和最大值的标记来自定义滑块。

0最小值

100最大值

轨道

轨道显示用户可选择的范围。

移除轨道

可以使用 track={false} 关闭轨道。

移除轨道

移除轨道范围滑块

反向轨道

可以使用 track="inverted" 反转轨道。

反向轨道

反向轨道范围

非线性比例

您可以使用 scale 属性在不同的比例上表示 value。

在以下演示中，值 x 表示值 2^x。将 x 增加 1 会使表示的值增加 2 倍。

存储1 MB

<Typography id="non-linear-slider" gutterBottom>
  Storage: {valueLabelFormat(calculateValue(value))}
</Typography>
<Slider
  value={value}
  min={5}
  step={1}
  max={30}
  scale={calculateValue}
  getAriaValueText={valueLabelFormat}
  valueLabelFormat={valueLabelFormat}
  onChange={handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="non-linear-slider"
/>

<Typography id="non-linear-slider" gutterBottom>
  Storage: {valueLabelFormat(calculateValue(value))}
</Typography>
<Slider
  value={value}
  min={5}
  step={1}
  max={30}
  scale={calculateValue}
  getAriaValueText={valueLabelFormat}
  valueLabelFormat={valueLabelFormat}
  onChange={handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="non-linear-slider"
/>

按 Enter 键开始编辑

可访问性

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/)

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

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

无样式

使用 Base UI Slider 完全掌控组件的设计，无需覆盖 Material UI 或 Joy UI 样式。此无样式版本的组件是需要重度自定义和更小包大小的理想选择。

API

请参阅下面的文档，以获取此处提及的组件的所有属性和类的完整参考。

<Slider />