[筆記] 哎呀！不小心刻了一套 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

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 7
• [筆記] 實作動畫 div 移入效果需注意滾軸所造成的影響
• [筆記] 程式必修課！離散數學與演算法 – 6
• [筆記] 程式必修課！離散數學與演算法 – 5
• [筆記] 程式必修課！離散數學與演算法 – 4