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
85
Day14: Slider 與列表互動
◼︎ 本集內容:客製化 Slider 與列表的互動練習
透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。
Kalan
September 23, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
730
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
230
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
110
状態管理を楽にする道
kjj6198
1
270
Day25. 如何解析 HTML 語法
kjj6198
0
100
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
140
Svelte 如何編譯程式碼(1)
kjj6198
0
120
Day22. Svelte 經驗談
kjj6198
0
110
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
100
Other Decks in Programming
See All in Programming
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
元気予報
suu_mire0726
0
850
Ruby Function Composition
bkuhlmann
1
330
puregoの活用例
aethiopicuschan
0
220
受託開発でGitLab CI を活用していく
xiombatsg
1
270
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
1
280
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
230
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
100
"config" ってなんだ? / What is "config"?
okashoi
0
210
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
210
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Why Our Code Smells
bkeepers
PRO
331
56k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
13k
How to name files
jennybc
64
92k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
We Have a Design System, Now What?
morganepeng
42
6.7k
Pencils Down: Stop Designing & Start Developing
hursman
116
11k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
A designer walks into a library…
pauljervisheath
199
23k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Navigating Team Friction
lara
177
13k
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"