滑桿

滑桿產生一個背景元素，可用於各種目的。

簡介

滑桿非常適合受益於可調整內容視覺呈現的介面控制項，例如音量或亮度設定，或用於應用圖像濾鏡，例如漸層或飽和度。

元件

在安裝之後，您可以使用以下基本元素開始建構此元件

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

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

步驟

透過將所需的值設定為 step 屬性來變更預設的步驟增量。請務必將 shiftStep 屬性（當使用 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 屬性來建立自訂標記

<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 鍵開始編輯

永遠可見的標籤

若要使拇指標籤永遠可見，請切換 valueLabelDisplay 屬性為開啟。

<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 屬性

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 鍵開始編輯