Slider 滑块控件

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

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

连续滑块（Continuous sliders）

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

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

Press Enter to start editing

尺寸

For smaller slider, use the prop 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" />

Press Enter to start editing

间续滑块（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="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 />

Press Enter to start editing

小的步骤

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

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

Press Enter to start editing

自定义标记

通过将一个丰富的数组提供给 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}
/>

Press Enter to start editing

受限制的值

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

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

Press Enter to start editing

标签总是可见

通过设置 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"
/>

Press Enter to start editing

范围滑块

通过提供一个包含值的数组给 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}
/>

Press Enter to start editing

Minimum distance

You can enforce a minimum distance between values in the onChange event handler. By default, when you move the pointer over a thumb while dragging another thumb, the active thumb will swap to the hovered thumb. You can disable this behavior with the disableSwap prop. You can enforce a minimum distance between values in the onChange event handler. By default, when you move the pointer over a thumb while dragging another thumb, the active thumb will swap to the hovered thumb. You can disable this behavior with the disableSwap prop. You can enforce a minimum distance between values in the onChange event handler. By default, when you move the pointer over a thumb while dragging another thumb, the active thumb will swap to the hovered thumb. You can disable this behavior with the disableSwap prop. If you want the range to shift when reaching minimum distance, you can utilize the activeThumb parameter in onChange.

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

Press Enter to start editing

带输入框的滑块组件

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

Volume

Color 颜色

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

Press Enter to start editing

自定义滑块

你可以参考以下一些例子来自定义组件。 You can learn more about this in the overrides documentation page.

iOS

pretto.fr

Tooltip value label

Airbnb

Music player

Jun Pulse

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

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

0:32

-2:48

纵向滑块

警告： Chrome、Safari 和较新的 Edge 版本，即任何基于 WebKit 的浏览器都会将 <Slider orientation="vertical" /> 暴露为水平状态（chromium 问题 #1158217）。通过应用 -webkit-appearance: slider-vertical; 将滑块显示为垂直。

然而，应用 -webkit-appearance: slider-vertical; 之后会导致水平键的键盘导航（向左箭头，向右箭头）被反转（chromium 问题 #1162640）。通常情况下，向上、向右应增加，向左、向下应减少数值。如果你应用 -webkit-appearance，那么就可以阻止键盘导航水平方向键的功能，以实现真正的垂直滑块。与改变方向相比，这可能会减少用户的困惑。

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

Press Enter to start editing

轨道（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"
/>
<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"
/>

Press Enter to start editing

Accessibility

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

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. This is not required if the value matches the semantics of the label. You can change the name with the getAriaValueText or aria-valuetext prop.

Limitations

IE 11

The slider's value label is not centered in IE 11. The alignement is not handled to make customizations easier with the lastest browsers. You can solve the issue with:

.MuiSlider-valueLabel {
  left: calc(-50% - 4px);
}

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.

API

<Slider />