Material UI in React [ Day13 ] Inputs (slider) 调整滑块

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 再回过来看会比较明朗，那麽今天的讲解就先这样，毕竟有案子在忙还要每天赶发文还真不容易~