Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Day14: Slider 與列表互動

Avatar for Kalan Kalan
September 23, 2020
Programming
0
160

Day14: Slider 與列表互動

◼︎ 本集內容：客製化 Slider 與列表的互動練習

透過 Svelte 來實作一個客製化的 Slider，並且盡可能地涵蓋多一點細節。

Avatar for Kalan

Kalan

September 23, 2020
Tweet

More Decks by Kalan

See All by Kalan
單頁式應用中的無障礙設計
Avatar for Kalan kjj6198
0
810
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
380
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
200
状態管理を楽にする道
Avatar for Kalan kjj6198
1
410
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
160
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
220
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
220
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
180
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
180

Other Decks in Programming

See All in Programming
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.6k
CSC307 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
生成AIを活用したソフトウェア開発ライフサイクル変革の現在値
Avatar for Hiroyuki Mori hiroyukimori
PRO
0
100
SourceGeneratorのススメ
Avatar for tkym htkym
0
200
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650
CSC307 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
670
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
280
AI & Enginnering
Avatar for codelynx codelynx
0
120
MUSUBIXとは
Avatar for Hisaho nahisaho
0
140
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
1k

Featured

See All Featured
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
910
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
230
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
64
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
250
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
52
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
86
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
70
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k

Transcript

  1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1

    學 Svelte Day14 - UI 實戰篇：客製化 Slider 搭配列表互動

  2. 第 12 屆 IT 鐵⼈賽 使⽤情景 - 有條件地搜尋列表

  3. 第 12 屆 IT 鐵⼈賽 Slider 實作功能 能⽤ input=range 就不要⾃⼰做

    選取範圍、可以透過滑鼠拉動 可以點擊長條部分調整數字

  4. 第 12 屆 IT 鐵⼈賽 列表實作功能 可以順利顯⽰列表 在篩選條件有變化時，做 Transition 效果

  5. 第 12 屆 IT 鐵⼈賽 更多功能 可以透過鍵盤操作數字（左、右） 加入 FLIP Accessibility

    ⽀援 aria-valuemind, aria-valuemax, aria-valuenow role="slider", aria-orientation="horizontal"