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

Day14: Slider 與列表互動

Avatar for Kalan Kalan
September 23, 2020
Programming
170
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
820
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
400
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
220
状態管理を楽にする道
Avatar for Kalan kjj6198
1
430
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
180
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
230
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
240
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
210
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
200

Other Decks in Programming

See All in Programming
Spec-Driven Development with AI-Agents: From High-Level Requirements to Working Software
Avatar for Anton Arhipov antonarhipov
2
370
Agentic UI beyond Chats Architecture Patterns & Open Standards @ngMunich 05/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
Avatar for izumin5210 izumin5210
2
940
Migrations : C'est une question d'hygiène !
Avatar for Vincent Amstoutz vinceamstoutz
0
2.2k
The Arts and Crafts of Work in the AI Era — Toward Mastery in Software Development
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
1
580
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
Avatar for nrs nrslib
10
2.7k
Transactional Change Stream Processing With Debezium and Apache Flink
Avatar for Gunnar Morling gunnarmorling
1
130
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
Avatar for Holly Cummins hollycummins
0
220
AI Agent と正しく分析するための環境作り
Avatar for yosh_yumyum yoshyum
3
610
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
1k
サーバーレスで作る、動画データ管理基盤
Avatar for Keigo Ibaraki oyasumipants
0
280
Swiftのレキシカルスコープ管理
Avatar for kntk kntkymt
0
200

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
170
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
180
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
7
660
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
550
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
190
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
930
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k

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"