$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Day14: Slider 與列表互動
Search
Kalan
September 23, 2020
Programming
0
160
Day14: Slider 與列表互動
◼︎ 本集內容:客製化 Slider 與列表的互動練習
透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。
Kalan
September 23, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
800
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
370
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
190
状態管理を楽にする道
kjj6198
1
400
Day25. 如何解析 HTML 語法
kjj6198
0
160
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
210
Svelte 如何編譯程式碼(1)
kjj6198
0
210
Day22. Svelte 經驗談
kjj6198
0
180
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
170
Other Decks in Programming
See All in Programming
perlをWebAssembly上で動かすと何が嬉しいの??? / Where does Perl-on-Wasm actually make sense?
mackee
0
130
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
n0bisuke2
3
1.3k
Basic Architectures
denyspoltorak
0
120
Cell-Based Architecture
larchanjo
0
140
開発に寄りそう自動テストの実現
goyoki
2
1.4k
SwiftUIで本格音ゲー実装してみた
hypebeans
0
500
これならできる!個人開発のすゝめ
tinykitten
PRO
0
130
The Art of Re-Architecture - Droidcon India 2025
siddroid
0
130
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
maryang
1
140
リリース時」テストから「デイリー実行」へ!開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
goataka
0
140
Python札幌 LT資料
t3tra
7
1.1k
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
170
Featured
See All Featured
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
74
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
170
GitHub's CSS Performance
jonrohan
1032
470k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
50k
Rails Girls Zürich Keynote
gr2m
95
14k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
150
The Spectacular Lies of Maps
axbom
PRO
1
400
Site-Speed That Sticks
csswizardry
13
1k
What does AI have to do with Human Rights?
axbom
PRO
0
1.9k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
61
40k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
69
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"