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
150
Day14: Slider 與列表互動
◼︎ 本集內容:客製化 Slider 與列表的互動練習
透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。
Kalan
September 23, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
780
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
350
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
170
状態管理を楽にする道
kjj6198
1
380
Day25. 如何解析 HTML 語法
kjj6198
0
150
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
200
Svelte 如何編譯程式碼(1)
kjj6198
0
200
Day22. Svelte 經驗談
kjj6198
0
170
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
160
Other Decks in Programming
See All in Programming
個人軟體時代
ethanhuang13
0
330
Rancher と Terraform
fufuhu
2
550
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
Cache Me If You Can
ryunen344
2
3.1k
AI時代のUIはどこへ行く?
yusukebe
18
9.1k
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
470
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Agile that works and the tools we love
rasmusluckow
330
21k
Context Engineering - Making Every Token Count
addyosmani
3
60
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How STYLIGHT went responsive
nonsquared
100
5.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
The Pragmatic Product Professional
lauravandoore
36
6.9k
How to Ace a Technical Interview
jacobian
279
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
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"