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
790
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
350
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
180
状態管理を楽にする道
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
CSC509 Lecture 02
javiergs
PRO
0
400
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
590
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
580
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.8k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Being A Developer After 40
akosma
91
590k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fireside Chat
paigeccino
40
3.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Faster Mobile Websites
deanohume
310
31k
Facilitating Awesome Meetings
lara
56
6.6k
Optimising Largest Contentful Paint
csswizardry
37
3.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"