Slider 滑块

用户可以使用滑块组件从某一范围内选取所需数值。

滑块反映了条形图上的一系列值，用户可以从中选择单个值。滑块组件适用于调节设备音量、调整屏幕亮度，或者改变图像滤镜的强度。

📦 22 kB gzipped (but only +8 kB when used together with other Material-UI components).

连续值滑块

用户可以使用连续值滑块从给定范围内选择某一数值。

Volume

Disabled slider

离散值滑块

Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos:

在横轴上标记可选数值的位置：marks={true}

Temperature

Disabled

Small steps

You can change the default step increment.

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

Custom marks

You can have custom marks by providing a rich array to the marks prop.

Custom marks

<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}
/>

Restricted values

You can restrict the selectable values to those provided with the marks prop with step={null}.

Restricted values

<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}
/>

Label always visible

数值标签始终可见： valueLabelDisplay="on"

Always visible

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

Range slider

The slider can be used to set the start and end of a range by supplying an array of values to the value prop.

Temperature range

2037

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

Slider with input field

In this example an input allows a discrete value to be set.

Volume

自定义滑块

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

iOS

pretto.fr

Tooltip value label

Airbnb

纵向滑块

Temperature

Track

The track shows the range available for user selection.

Removed track

The track can be turned off with track={false}.

Removed track

Removed track range slider

Inverted track

The track can be inverted with track="inverted".

Inverted track

Inverted track range

Non-linear scale

You can use the scale prop to represent the value on a different scale. For instance, in the following demo, the value x represents the power of 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)

The component handles most of the work necessary to make it accessible. However, you need to make sure that:

Each thumb has a user-friendly label (aria-label, aria-labelledby or getAriaLabel prop).
Each thumb has a user-friendly text for its current value. 除非数值的含义显而易见。你可以通过getAriaValueText 或者 aria-valuetext 更改提示气泡的名称。

API

<Slider />