[筆記] 哎呀！不小心刻了一套 React UI 元件庫 7 – Slider

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Slider。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

內容

Slider 上頭的拖拉圓形小球稱為 thumb 整個 Slider 的可拖拉軌跡稱為 rail 標示所選取範圍的軌跡稱為 track

屬性

1. 最小值 min
2. 最大值 max
3. step 顆粒度：要可以被 max-min 整除
4. onChange：事件觸發
5. themeColor：顏色

因為是透過原生的 input type=range 進行修改，所以會需要保留 ref 和設定 defaultValue。同時將 defaultValue 的值用作 useState 的初始值，這樣一來才能同步兩邊的狀態。

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/177dc69b05d1f302038c628238a23bef13e307e7

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] HTML Input Date 最小值 最大值於 Safari 上失效
• [筆記] Vue3 元件更新 Component Update
• [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 34
• [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 35
• [筆記] The Linux Command Line: A complete Introduction 指令大全心得 – 14