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
120
Day14: Slider 與列表互動
◼︎ 本集內容:客製化 Slider 與列表的互動練習
透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。
Kalan
September 23, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
760
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
310
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
150
状態管理を楽にする道
kjj6198
1
340
Day25. 如何解析 HTML 語法
kjj6198
0
130
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
180
Svelte 如何編譯程式碼(1)
kjj6198
0
170
Day22. Svelte 經驗談
kjj6198
0
140
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
140
Other Decks in Programming
See All in Programming
テストをしないQAエンジニアは何をしているか?
nealle
0
130
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
WebDriver BiDiとは何なのか
yotahada3
1
140
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
sappoRo.R #12 初心者セッション
kosugitti
0
230
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
The World Runs on Bad Software
bkeepers
PRO
67
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Fireside Chat
paigeccino
34
3.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
For a Future-Friendly Web
brad_frost
176
9.5k
4 Signs Your Business is Dying
shpigford
182
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Code Review Best Practice
trishagee
66
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
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"