Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Day14: Slider 與列表互動
Search
Kalan
September 23, 2020
Programming
0
99
Day14: Slider 與列表互動
◼︎ 本集內容:客製化 Slider 與列表的互動練習
透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。
Kalan
September 23, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
740
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
260
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
130
状態管理を楽にする道
kjj6198
1
290
Day25. 如何解析 HTML 語法
kjj6198
0
110
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
150
Svelte 如何編譯程式碼(1)
kjj6198
0
130
Day22. Svelte 經驗談
kjj6198
0
120
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
110
Other Decks in Programming
See All in Programming
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
CSC307 Lecture 13
javiergs
PRO
0
150
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
生成AIをkintoneに連携してみた
hideg
0
230
20240706_CDKConf
takuyay0ne
0
1.2k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
AHC035解説
terryu16
0
710
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Featured
See All Featured
How to Ace a Technical Interview
jacobian
274
23k
Visualization
eitanlees
139
14k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
4 Signs Your Business is Dying
shpigford
178
21k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Producing Creativity
orderedlist
PRO
340
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Building Your Own Lightsaber
phodgson
101
5.9k
Transcript
第 12 屆 IT 鐵⼈賽 30 天從 0 到 1
學 Svelte Day14 - UI 實戰篇:客製化 Slider 搭配列表互動
第 12 屆 IT 鐵⼈賽 使⽤情景 - 有條件地搜尋列表
第 12 屆 IT 鐵⼈賽 Slider 實作功能 能⽤ input=range 就不要⾃⼰做
選取範圍、可以透過滑鼠拉動 可以點擊長條部分調整數字
第 12 屆 IT 鐵⼈賽 列表實作功能 可以順利顯⽰列表 在篩選條件有變化時,做 Transition 效果
第 12 屆 IT 鐵⼈賽 更多功能 可以透過鍵盤操作數字(左、右) 加入 FLIP Accessibility
⽀援 aria-valuemind, aria-valuemax, aria-valuenow role="slider", aria-orientation="horizontal"