Day14: Slider 與列表互動

◼︎ 本集內容：客製化 Slider 與列表的互動練習

透過 Svelte 來實作一個客製化的 Slider，並且盡可能地涵蓋多一點細節。

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day14 - UI 實戰篇：客製化 Slider 搭配列表互動
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   使⽤情景 - 有條件地搜尋列表
   

   View Slide

3. 第 12 屆 IT 鐵⼈賽
   Slider 實作功能
   能⽤ input=range 就不要⾃⼰做
   選取範圍、可以透過滑鼠拉動
   可以點擊長條部分調整數字
   

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   列表實作功能
   可以順利顯⽰列表
   在篩選條件有變化時，做 Transition 效果
   

   View Slide

5. 第 12 屆 IT 鐵⼈賽
   更多功能
   可以透過鍵盤操作數字（左、右）
   加入 FLIP
   Accessibility ⽀援
   aria-valuemind, aria-valuemax, aria-valuenow
   role="slider", aria-orientation="horizontal"
   

   View Slide