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" /><Slider
size="small"
defaultValue={70}
aria-label="Small"
valueLabelDisplay="auto"
/>
<Slider defaultValue={50} aria-label="Default" valueLabelDisplay="auto" /><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"
/><Slider
aria-label="Custom marks"
defaultValue={20}
getAriaValueText={valuetext}
step={10}
valueLabelDisplay="auto"
marks={marks}
/><Slider
aria-label="Restricted values"
defaultValue={20}
valueLabelFormat={valueLabelFormat}
getAriaValueText={valuetext}
step={null}
valueLabelDisplay="auto"
marks={marks}
/><Slider
aria-label="Always visible"
defaultValue={80}
getAriaValueText={valuetext}
step={10}
marks={marks}
valueLabelDisplay="on"
/><Slider
getAriaLabel={() => 'Temperature range'}
value={value}
onChange={handleChange}
valueLabelDisplay="auto"
getAriaValueText={valuetext}
/>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. 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
/>Volume
<Slider
aria-label="Temperature"
defaultValue={30}
getAriaValueText={valuetext}
color="secondary"
/>自定义滑块
你可以参考以下一些例子来自定义组件。 您可以在 重写文档页面 中了解更多有关此内容的信息。
iOS
pretto.fr
Tooltip value label
Airbnb
คนเก่าเขาทำไว้ดี (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}
/>Removed track
Removed track range slider
Inverted track
Inverted track range
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"
/>Unstyled
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider)
该组件处理了大部分必要的工作，使之应用无障碍访问。 但是，你需要确保：
- 📦 5.6 kB gzipped
- 每一个滑块的当前值都有一个方便用户阅读的文字。 如果值与标签的语义相匹配的话，则不需要此操作。 你可以通过
getAriaValueText或者aria-valuetext属性来更改名字。
无障碍设计
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: 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);
}