跳转到内容

Slider 滑块控件

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

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

连续滑块(Continuous sliders)

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

Volume

Disabled slider

间续滑块(Discrete sliders)

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

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

Temperature

30

Disabled

30

小的步骤

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

Small steps

5e-8
<Typography id="discrete-slider-small-steps" gutterBottom>
  Small steps
</Typography>
<Slider
  defaultValue={0.00000005}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-small-steps"
  step={0.00000001}
  marks
  min={-0.00000005}
  max={0.0000001}
  valueLabelDisplay="auto"
/>

自定义标记

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

Custom marks

20
<Typography id="discrete-slider-custom" gutterBottom>
  Custom marks
</Typography>
<Slider
  defaultValue={20}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-custom"
  step={10}
  valueLabelDisplay="auto"
  marks={marks}
/>

受限制的值

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

Restricted values

2
<Typography id="discrete-slider-restrict" gutterBottom>
  Restricted values
</Typography>
<Slider
  defaultValue={20}
  valueLabelFormat={valueLabelFormat}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-restrict"
  step={null}
  valueLabelDisplay="auto"
  marks={marks}
/>

标签总是可见

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

Always visible

80
<Typography id="discrete-slider-always" gutterBottom>
  Always visible
</Typography>
<Slider
  defaultValue={80}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-always"
  step={10}
  marks={marks}
  valueLabelDisplay="on"
/>

范围滑块

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

Temperature range

2037
<Typography id="range-slider" gutterBottom>
  Temperature range
</Typography>
<Slider
  value={value}
  onChange={handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="range-slider"
  getAriaValueText={valuetext}
/>

带输入框的滑块组件

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

Volume

自定义滑块

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

iOS

60

pretto.fr

20

Tooltip value label

Airbnb

纵向滑块

Temperature

轨道(Track)

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

移除轨道

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

Removed track

Removed track range slider

反转轨道

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

Inverted track

Inverted track range

非线性缩放

你可以使用 scale 属性来表示不同范围的。 例如,在下面的例子中,x 的值表示 10^x

Temperature range

1e^0
<Typography id="non-linear-slider" gutterBottom>
  Temperature range
</Typography>
<Slider
  value={value}
  min={0}
  step={0.1}
  max={6}
  scale={(x) => x ** 10}
  getAriaValueText={valueLabelFormat}
  valueLabelFormat={valueLabelFormat}
  onChange={handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="non-linear-slider"
/>

无障碍设计

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

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

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