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

Day14: Slider 與列表互動

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
810
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
390
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
200
状態管理を楽にする道
Avatar for Kalan kjj6198
1
420
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
160
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
220
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
230
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
190
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
190

Other Decks in Programming

See All in Programming
PDI: Como Alavancar Sua Carreira e Seu Negócio
Avatar for Marcel dos Santos marcelgsantos
0
100
瑠璃の宝石に学ぶ技術の声の聴き方 / 【劇場版】アニメから得た学びを発表会2026 #エンジニアニメ
Avatar for mazrean mazrean
0
170
Linux Kernelの1文字のミスで 権限昇格ができた話
Avatar for rona rqda
0
2.3k
20260315 AWSなんもわからん🥲
Avatar for Chiaki Okamoto chiilog
2
190
ドメインイベントでビジネスロジックを解きほぐす #phpcon_odawara
Avatar for Takuma Kajikawa kajitack
2
100
野球解説AI Agentを開発してみた - 2026/02/27 LayerX社内LT会資料
Avatar for Shinichi Nakagawa shinyorke
PRO
0
400
一度始めたらやめられない開発効率向上術 / Findy あなたのdotfilesを教えて！
Avatar for Takashi Kokubun k0kubun
4
2.8k
Spec Driven Development: The End Of Vibe Coding | DevLand 2026
Avatar for Daniel Sogl danielsogl
PRO
0
110
Java 21/25 Virtual Threads 소개
Avatar for Sunghyouk Bae (Debop) debop
0
330
PHPで TLSのプロトコルを実装してみる
Avatar for higaki higaki_program
0
740
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
Avatar for shogogg shogogg
2
810
AI時代のPhpStorm最新事情 #phpcon_odawara
Avatar for yusuke yusuke
0
110

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.4k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
440
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
150
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
320
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.8k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
420
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
520
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
290

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"