Day14: Slider 與列表互動

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

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

Kalan

September 23, 2020

More Decks by Kalan

See All by Kalan

單頁式應用中的無障礙設計

0

820

選擇 Svelte 的三個理由 - JSDC

0

390

Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21

0

210

状態管理を楽にする道

1

420

Day25. 如何解析 HTML 語法

0

160

Day24. Svelte 如何編譯程式碼（2）

0

220

Svelte 如何編譯程式碼（1）

0

230

Day22. Svelte 經驗談

0

200

Day18. UI 實戰篇 - 圖片檢視器

0

190

Other Decks in Programming

See All in Programming

mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)

2

670

検索設計から 推論設計への重心移動と Recall-First Retrieval

4

1.2k

🦞OpenClaw works with AWS

1

250

Claude CodeでETLジョブ実行テストを自動化してみた

0

840

決定論 vs 確率論：Gemini 3 FlashとTF-IDFを組み合わせた「法規判定エンジン」の構築

0

120

Vibe NLP for Applied NLP

PRO

0

490

Kingdom of the Machine

2

940

エラー処理の温故知新 / history of error handling technic

6

1.6k

セグメントとターゲットを意識するプロポーザルの書き方〜採択の鍵は、誰に刺すかを見極めるマーケティング戦略にある〜

PRO

0

590

10年分の技術的負債、完済へ ― Claude Code主導のAI駆動開発でスポーツブルを丸ごとリプレイスした話

takuya_houshima

0

2.6k

GoogleCloudとterraform完全に理解した

1

160

GitHubCopilotCLIをはじめよう.pdf

0

270

Featured

See All Featured

30 Presentation Tips

PRO

1

280

[SF Ruby Conf 2025] Rails X

2

980

Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything

31

2.8k

Six Lessons from altMBA

29

4.2k

Unlocking the hidden potential of vector embeddings in international SEO

0

770

Design in an AI World

1

200

0

550

Statistics for Hackers

799

230k

How to build a perfect <img>

1

5.4k

PRO

2

580

Test your architecture with Archunit

1

2.2k

Context Engineering - Making Every Token Count

9

850

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"