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
740
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
270
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
140
状態管理を楽にする道
kjj6198
1
300
Day25. 如何解析 HTML 語法
kjj6198
0
120
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
160
Svelte 如何編譯程式碼(1)
kjj6198
0
140
Day22. Svelte 經驗談
kjj6198
0
130
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
120
Other Decks in Programming
See All in Programming
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
470
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
630
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
160
Prolog入門
qnighy
4
1k
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
650
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
170
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
Featured
See All Featured
The Mythical Team-Month
searls
218
43k
Automating Front-end Workflow
addyosmani
1365
200k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Design by the Numbers
sachag
277
19k
Designing with Data
zakiwarfel
98
5k
Happy Clients
brianwarren
96
6.6k
Rails Girls Zürich Keynote
gr2m
93
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
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"