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

Day14: Slider 與列表互動

Kalan
September 23, 2020
Programming
0
120

Day14: Slider 與列表互動

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

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

Kalan

September 23, 2020
Tweet

More Decks by Kalan

See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
750
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
300
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
150
状態管理を楽にする道
kjj6198
1
320
Day25. 如何解析 HTML 語法
kjj6198
0
130
Day24. Svelte 如何編譯程式碼（2）
kjj6198
0
170
Svelte 如何編譯程式碼（1）
kjj6198
0
160
Day22. Svelte 經驗談
kjj6198
0
140
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
130

Other Decks in Programming

See All in Programming
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
180
テストコード書いてみませんか？
onopon
2
130
Amazon S3 NYJavaSIG 2024-12-12
sullis
0
100
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
400
Jakarta EE meets AI
ivargrimstad
0
260
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
830
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
130
From Translations to Multi Dimension Entities
alexanderschranz
2
130
良いユニットテストを書こう
mototakatsu
8
2.8k
useSyncExternalStoreを使いまくる
ssssota
6
1.2k
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k

Featured

See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Code Reviewing Like a Champion
maltzj
520
39k
Gamification - CAS2011
davidbonilla
80
5.1k
Unsuck your backbone
ammeep
669
57k
Fireside Chat
paigeccino
34
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to train your dragon (web standard)
notwaldorf
88
5.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
We Have a Design System, Now What?
morganepeng
51
7.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k

Transcript

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

    學 Svelte Day14 - UI 實戰篇：客製化 Slider 搭配列表互動

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

  3. 第 12 屆 IT 鐵⼈賽 Slider 實作功能 能⽤ input=range 就不要⾃⼰做

    選取範圍、可以透過滑鼠拉動 可以點擊長條部分調整數字

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

  5. 第 12 屆 IT 鐵⼈賽 更多功能 可以透過鍵盤操作數字（左、右） 加入 FLIP Accessibility

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