Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Day14: Slider 與列表互動
Search
Kalan
September 23, 2020
Programming
220
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Day14: Slider 與列表互動
◼︎ 本集內容:客製化 Slider 與列表的互動練習
透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。
Kalan
September 23, 2020
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
870
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
470
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
270
状態管理を楽にする道
kjj6198
1
480
Day25. 如何解析 HTML 語法
kjj6198
0
230
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
260
Svelte 如何編譯程式碼(1)
kjj6198
0
300
Day22. Svelte 經驗談
kjj6198
0
270
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
250
Other Decks in Programming
See All in Programming
自サークルのIdPからログアウトできるようになるまで
taiseiue
1
150
Vue Fes Japan の “作る側”に関わってみて
naokihaba
1
200
Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.
rkaga
8
2.4k
見えないものを探る要求要件定義に必要な基本的思考 / invisible-requirement-thinking
minodriven
15
8.9k
Snowflake Openflow Connector利用の勘所 / 20261024developersio2026tokyo-snowflake-openflow
kasacchiful
PRO
0
220
学びを記事・スライド・Xへ高速展開する― AI-assisted Learning Loopで回すコンテンツ生成術
ochtum
0
150
Inertia Rails: The One-Person Framework with React & Friends
skryukov
0
170
気持ちぃ〜角丸 Squircle
ryu1013
0
360
Kotlinの15年とServer-Side Kotlin
n_takehata
1
170
sbt 2.0: takeoff
eed3si9n
0
170
Domain-Driven Transformation
hschwentner
2
2.3k
When benchmarks go bad - what I learned from measuring performance wrong
hollycummins
0
250
Featured
See All Featured
sira's awesome portfolio website redesign presentation
elsirapls
0
470
The SEO identity crisis: Don't let AI make you average
varn
0
610
Ruling the World: When Life Gets Gamed
codingconduct
0
420
Fantastic passwords and where to find them - at NoRuKo
philnash
53
4k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.8k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
2
2.9k
Utilizing Notion as your number one productivity tool
mfonobong
4
630
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.4k
[SF Ruby Conf 2025] Rails X
palkan
3
1.5k
Paper Plane (Part 1)
katiecoart
PRO
2
12k
Are puppies a ranking factor?
jonoalderson
2
4.1k
AI: The stuff that nobody shows you
jnunemaker
PRO
10
1.2k
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"