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
110
Day14: Slider 與列表互動
◼︎ 本集內容:客製化 Slider 與列表的互動練習
透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。
Kalan
September 23, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
750
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
290
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
140
状態管理を楽にする道
kjj6198
1
310
Day25. 如何解析 HTML 語法
kjj6198
0
130
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
170
Svelte 如何編譯程式碼(1)
kjj6198
0
140
Day22. Svelte 經驗談
kjj6198
0
140
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
130
Other Decks in Programming
See All in Programming
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
5
1.8k
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
470
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.5k
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
10
1.7k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
230
僕がつくった48個のWebサービス達
yusukebe
20
17k
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
24
12k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
410
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
160
C#/.NETのこれまでのふりかえり
tomokusaba
1
170
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
330
Featured
See All Featured
Unsuck your backbone
ammeep
668
57k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Docker and Python
trallard
40
3.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Bash Introduction
62gerente
608
210k
Gamification - CAS2011
davidbonilla
80
5k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Music & Morning Musume
bryan
46
6.1k
It's Worth the Effort
3n
183
27k
Become a Pro
speakerdeck
PRO
24
5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
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"