Slider

滑塊組件通常用來跳整音量，螢幕亮度的時候使用，這裡值得變更不能以

const [sliderVal, setSliderVal] = React.useState(20);
const sliderValChange = e => {
  setSliderVal(e.target.value);
};

方式撰寫，必須和文件上的做法相同才行:

const sliderValChange = (e, newVal) => {
  setSliderVal(newVal);
};

想讓目前線上的值線顯示出來的話，可將 property: valueLabelDisplay 設為 auto，如果設為 on 則標籤會一直存在

<Slider defaultValue={30} valueLabelDisplay="auto" />

想固定每次移動的遞增/遞減量時，可將 property: step 設成你想要的數值:

<Slider defaultValue={30} valueLabelDisplay="auto" step={5} />

想設定滑塊值的範圍時，可以定義 property: min,max 來調整:

<Slider defaultValue={30} valueLabelDisplay="auto" step={5} min={10} max{80} />

想讓顯示條上有顆粒的話可以設立 property: marks 為 true

<Slider defaultValue={30} valueLabelDisplay="auto" step={5} min={10} max{80} marks />

自定義的 marks

property: marks 也可以接受鎮列為參數來自定義不同的mark:

// 先定義 marks arr
const marksArr = [
  {
    value: 0,
    label: '0°C',
  },
  {
    value: 20,
    label: '20°C',
  },
  {
    value: 37,
    label: '37°C',
  },
  {
    value: 100,
    label: '100°C',
  },
];
// in return...
<Slider defaultValue={10} valueLabelDisplay="auto" marks={marksArr} />

marks 可以接受 array 那麼 value 也給 array 的話會得到 一段範圍的值:

// 將原先 value 的值改為 arr
const [sliderVal, setSliderVal] = React.useState([20, 37]);
// in return
<Slider
    value={sliderVal}
    onChange={sliderValChange}
    valueLabelDisplay="auto"
  />

垂直的slider

如果需要做到垂直的 Slider，那麼就需要設定高度來讓他展開，並在 property: orientation 中設定為"vertical"，下面為示範範例

<Box style={{ height: 200 }}>
  <Slider
    defaultValue={10}
    orientation="vertical"
    valueLabelDisplay="auto"
  />
</Box>

Track

如果不需要亮度調來顯示的話可以透過 track={false} 的方式關閉:

<Slider
  defaultValue={10}
  valueLabelDisplay="auto"
  track={false}
/>

如果需要反向的 track，可以透過 track="inverted" 來設定，如果 value 擺的是 range 的話會是範圍以外的區域。
反向:

<Slider
  track="inverted"
  defaultValue={30}
/>

範圍:

<Slider
  track="inverted"
  defaultValue={[20, 30]}
/>

有關 Slider 的講解就先到這邊，至此算是大致講完了所有 Inputs 的組件部份了，接下來會從 Navigation 的部分講解組件，有部分簡單或與原生作法並無太大差異的我就會跳過，例如 Link,
breadcrumb，Drawer的話會擺到後面等完成 surfaces 的 AppBar 再回過來看會比較明朗，那麼今天的講解就先這樣，畢竟有案子在忙還要每天趕發文還真不容易~