跳转到内容
编辑此页面

Slider 滑块控件

用户可以使用滑块控件在某一范围内取值。

滑块反映了一根条上的一系列值，用户可以从中选择单个值。 它们通常适用于调节一些设置，譬如调节设备音量、调整屏幕亮度，或者改变图像的滤镜。

连续滑块（Continuous sliders）

用户可以使用连续的滑块组件在给定的范围内选择一个值。

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

间续滑块（Discrete sliders）

用户可以通过参考其值指示器，来将间续滑块调整为某一特定值。 以下是一些案例：

通过设置 marks={true}，你可以针对每个步骤产生一个标记（mark）。

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

小的步骤

您可以更改默认的步进增量。

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

自定义标记

通过将一个丰富的数组提供给 marks 属性，您可以定制标记。

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

受限制的值

通过将 step={null} 赋予给 marks 属性，您可以限制可供选择的值。

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

标签总是可见

通过设置 valueLabelDisplay="on"，您可以强制缩略图的标签始终可见。

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

范围滑块

通过提供一个包含值的数组给 value 属性，您可以设置滑块的起始和终止值。

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

带输入框的滑块组件

在这个例子中，我们允许给输入框设置一个离散值。

Volume

自定义滑块

你可以参考以下一些例子来自定义组件。 您可以在 重写文档页面 中了解更多有关此内容的信息。

iOS

pretto.fr

Tooltip value label

Airbnb

纵向滑块

WARNING: Chrome, Safari and newer Edge versions i.e. any browser based on WebKit exposes <Slider orientation="vertical" /> as horizontal (chromium issue #1158217). By applying -webkit-appearance: slider-vertical; the slider is exposed as vertical.

However, by applying -webkit-appearance: slider-vertical; keyboard navigation for horizontal keys (Arrow Left, Arrow Right) is reversed (chromium issue #1162640). Usually, up and right should increase and left and down should decrease the value. If you apply -webkit-appearance you could prevent keyboard navigation for horizontal arrow keys for a truly vertical slider. This might be less confusing to users compared to a change in direction.

<Slider
  sx={{
    '& input[type="range"]': {
      WebkitAppearance: 'slider-vertical',
    },
  }}
  orientation="vertical"
  defaultValue={30}
  aria-label="Temperature"
  onKeyDown={preventHorizontalKeyboardNavigation}
/>

轨道（Track）

轨道显示了允许用户选择的范围。

移除轨道

您可以通过设置 track={false} 来禁用轨道。

Removed track

Removed track range slider

反转轨道

你可以通过设置 track="inverted" 来反转轨道。

Inverted track

Inverted track range

非线性缩放

你可以使用 scale 属性来表示不同范围的值。

在下面的演示中，x 代表 _2^x_。 将 x 增加 1 会使表示的值增加 _2_。

Storage: 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"
/>

无样式的滑块

<StyledSlider defaultValue={10} />

无障碍设计

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider)

该组件处理了大部分必要的工作，使之应用无障碍访问。 但是，你需要确保：

  • 每个滑块都带有一个方便用户的标签（aria-label、aria-labelledby 或 getAriaLabel 属性）。
  • 每一个滑块的当前值都有一个方便用户阅读的文字。 如果值与标签的语义相匹配的话，则不需要此操作。 你可以通过getAriaValueText 或者 aria-valuetext 属性来更改名字。

API