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
350
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
170
状態管理を楽にする道
kjj6198
1
380
Day25. 如何解析 HTML 語法
kjj6198
0
150
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
200
Svelte 如何編譯程式碼(1)
kjj6198
0
200
Day22. Svelte 經驗談
kjj6198
0
170
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
160
Other Decks in Programming
See All in Programming
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
520
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
3
1.3k
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
8
3.2k
Ruby Parser progress report 2025
yui_knk
1
120
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
910
RDoc meets YARD
okuramasafumi
3
140
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
210
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
Rancher と Terraform
fufuhu
0
110
実践!App Intents対応
yuukiw00w
1
360
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
220
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.5k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
What's in a price? How to price your products and services
michaelherold
246
12k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
A Tale of Four Properties
chriscoyier
160
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
How GitHub (no longer) Works
holman
315
140k
Gamification - CAS2011
davidbonilla
81
5.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Writing Fast Ruby
sferik
628
62k
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"