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

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

react logo


[ 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


相關文章

★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Modal 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容需要引入 P
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Progress Circle 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Progress Bar 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容概念1
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Skeleton 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容概念1.
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Spin 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數isLoading
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Pagination 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數pag
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Tabs。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數themeColor – 主題配色
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Drawer 的實踐方法 ( 需搭配 Portal 一起使用 )。[ Repo ]:https://github.com/andy922200/practice-
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Select 的實踐方法 ( 需搭配 Dropdown 的 Portal 一起使用 )。[ Repo ]:https://github.com/andy922
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 19 – Dropdown
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 19 – Dropdown
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Dropdown 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容由於 Drop
按讚加入粉絲團

延伸閱讀