Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Day14: Slider 與列表互動
Search
Kalan
September 23, 2020
Programming
0
150
Day14: Slider 與列表互動
◼︎ 本集內容:客製化 Slider 與列表的互動練習
透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。
Kalan
September 23, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
800
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
370
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
180
状態管理を楽にする道
kjj6198
1
400
Day25. 如何解析 HTML 語法
kjj6198
0
160
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
210
Svelte 如何編譯程式碼(1)
kjj6198
0
210
Day22. Svelte 經驗談
kjj6198
0
180
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
170
Other Decks in Programming
See All in Programming
Rediscover the Console - SymfonyCon Amsterdam 2025
chalasr
2
160
新卒エンジニアのプルリクエスト with AI駆動
fukunaga2025
0
200
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
atzzcokek
0
210
sbt 2
xuwei_k
0
260
ViewファーストなRailsアプリ開発のたのしさ
sugiwe
0
430
社内オペレーション改善のためのTypeScript / TSKaigi Hokuriku 2025
dachi023
1
560
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
nowaki28
0
390
Context is King? 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
rkaga
7
1k
手軽に積ん読を増やすには?/読みたい本と付き合うには?
o0h
PRO
1
170
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
harappa80
0
290
ソフトウェア設計の課題・原則・実践技法
masuda220
PRO
26
22k
リリース時」テストから「デイリー実行」へ!開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
goataka
0
120
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Six Lessons from altMBA
skipperchong
29
4.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
970
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
The World Runs on Bad Software
bkeepers
PRO
72
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Designing Experiences People Love
moore
143
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
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"