Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Day14: Slider 與列表互動

Kalan
September 23, 2020

Day14: Slider 與列表互動

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

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

Kalan

September 23, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

Transcript

  1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1

    學 Svelte Day14 - UI 實戰篇:客製化 Slider 搭配列表互動
  2. 第 12 屆 IT 鐵⼈賽 Slider 實作功能 能⽤ input=range 就不要⾃⼰做

    選取範圍、可以透過滑鼠拉動 可以點擊長條部分調整數字
  3. 第 12 屆 IT 鐵⼈賽 更多功能 可以透過鍵盤操作數字(左、右) 加入 FLIP Accessibility

    ⽀援 aria-valuemind, aria-valuemax, aria-valuenow role="slider", aria-orientation="horizontal"