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
110
Day14: Slider 與列表互動
◼︎ 本集內容:客製化 Slider 與列表的互動練習
透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。
Kalan
September 23, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
750
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
290
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
140
状態管理を楽にする道
kjj6198
1
310
Day25. 如何解析 HTML 語法
kjj6198
0
130
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
170
Svelte 如何編譯程式碼(1)
kjj6198
0
150
Day22. Svelte 經驗談
kjj6198
0
140
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
130
Other Decks in Programming
See All in Programming
RubyLSPのマルチバイト文字対応
notfounds
0
120
Arm移行タイムアタック
qnighy
0
340
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
940
React への依存を最小にするフロントエンド設計
takonda
5
1.1k
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
700
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
200
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
990
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
900
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
RailsConf 2023
tenderlove
29
900
Designing Experiences People Love
moore
138
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Done Done
chrislema
181
16k
Gamification - CAS2011
davidbonilla
80
5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Writing Fast Ruby
sferik
627
61k
Into the Great Unknown - MozCon
thekraken
32
1.5k
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"