Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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