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
140
Day14: Slider 與列表互動
◼︎ 本集內容:客製化 Slider 與列表的互動練習
透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。
Kalan
September 23, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
780
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
340
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
170
状態管理を楽にする道
kjj6198
1
370
Day25. 如何解析 HTML 語法
kjj6198
0
140
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
190
Svelte 如何編譯程式碼(1)
kjj6198
0
190
Day22. Svelte 經驗談
kjj6198
0
160
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
150
Other Decks in Programming
See All in Programming
「App Intent」よくわからんけどすごい!
rinngo0302
1
100
型で語るカタ
irof
0
700
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
990
NEWT Backend Evolution
xpromx
1
140
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
760
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
200
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
PicoRuby on Rails
makicamel
3
140
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
What's new in AppKit on macOS 26
1024jp
0
150
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
RailsConf 2023
tenderlove
30
1.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How to Ace a Technical Interview
jacobian
278
23k
Producing Creativity
orderedlist
PRO
346
40k
Practical Orchestrator
shlominoach
189
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
The World Runs on Bad Software
bkeepers
PRO
70
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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"