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

Day14: Slider 與列表互動

Avatar for Kalan Kalan
September 23, 2020
Programming
180
0

Day14: Slider 與列表互動

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

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

Avatar for Kalan

Kalan

September 23, 2020

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
PHP Application における Kubernetes 内 gRPC 通信
Avatar for Shin Ohno ganchiku
0
570
What's New in Android 2026
Avatar for Veronikapj veronikapj
0
240
音楽のための関数型プログラミング言語mimiumにおける多段階計算の活用
Avatar for Tomoya Matsuura tomoyanonymous
1
380
FDEが実現するAI駆動経営の現在地
Avatar for ryuta sakamoto gonta
2
240
言語を使う側から、作る側へ。 自作 Lisp で得た新たな気づき。
Avatar for ANDPAD inc andpad
0
140
Japan Community Day at Kubecon + CloudNativeCon Japan 2026: Learning Container Privilege Control by Building My Own Low-Level Container Runtime
Avatar for ternbusty ternbusty
1
110
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
3.3k
全PRの83%がAIレビューだけでマージできるようになった開発組織はその後どうなったか
Avatar for a-thug athug
0
1k
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
4
320
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
490
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
Avatar for pluulove (노현석) pluu
0
200
Build-to-own AI: Agentic Development for Humans
Avatar for Ines Montani inesmontani
PRO
0
160

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
430
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
330
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
420
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
390
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
400
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
240
Docker and Python
Avatar for Tania Allard trallard
47
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"