滑块

滑块生成一个背景元素，可用于各种用途。

简介

滑块非常适合需要可视化表示可调内容的界面控件，例如音量或亮度设置，或用于应用图像滤镜，例如渐变或饱和度。

组件

完成安装后，您可以使用以下基本元素开始构建此组件

import Slider from '@mui/joy/Slider';

export default function MyApp() {
  return <Slider defaultValue={3} max={10} />;
}

步长

通过将所需值设置为 step prop 来更改默认步长增量。确保将 shiftStep prop（使用 Page Up/Down 或 Shift + 向上/向下箭头时滑块可以步进的粒度）调整为可被 step 整除的值。

5e-8

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

按下 Enter 开始编辑

自定义标记

您可以通过向 marks prop 提供丰富的数组来创建自定义标记

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

按下 Enter 开始编辑

始终可见的标签

要使 thumb 标签始终可见，请开启 valueLabelDisplay prop。

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

按下 Enter 开始编辑

垂直

设置 orientation="vertical" 以显示垂直滑块。

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

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

按下 Enter 开始编辑

将标签保持在边缘

应用以下样式以确保标签在移动设备上到达滑块边缘时不会被截断。

0100

范围滑块

要让用户在滑块上设置范围的起点和终点，请向 value 或 defaultValue prop 提供一个值数组

2037

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

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

按下 Enter 开始编辑